Ich gegen das Web

Der Blog von jemanden der gegen das Web kämpft.

Über diesen Blog

Sebastian schreibt hier manchmal über seinen Kampf gegen das Internet. Wer da wohl gewinnt?

Navigation

Minimalistische Grundkonfiguration um Sass zu Css zu kompilieren

Ganz einfach Sass-Dateien in CSS-Code umwandeln. Ganz ohne Streß.

minimalistische-grundkonfiguration-um-sass-zu-compilen

Sass (kurz für syntaktisch fantastische Stylesheets) ist eine Präprozessor-Skriptsprache, die in Cascading Style Sheets (CSS) interpretiert oder kompiliert wird. SassScript ist die Skriptsprache selbst. Sass besteht aus zwei Syntaxen. Die ursprüngliche Syntax, "die eingerückte Syntax" genannt, verwendet eine ähnliche Syntax wie Haml. Dabei wurden Einrückungen genutzt um Codeblöcke und Regeln zu trennen. Die neuere Syntax "SCSS" (Sassy CSS) verwendet eine Blockformatierung wie die von CSS. Dies bedeutet, es werden geschweifte Klammern und Semikolonsgenutzt, um den Inhalt zu strukturieren. Alte und neue Syntax erhalten traditionell die Erweiterungen .sass bzw. .scss.

Nahezu alle CSS Frameworks bieten ein Sass-Package an (manchmal auch ein Less). Wenn du auf ein solches Framework zurückgreifen möchtest, bietet es sich an die Sass-Dateien so einzubinden, dass du das fertige CSS an deine Website oder dein Projekt anpasst und unnötigen Überhang vermeidest.

Ich möchte dir zeigen wie du das elegant mit npm machst.

In dieser Anleitung gehe ich davon aus, dass du eine Entwicklungsumgebung hast, die npm unterstützt. Eine solche Umgebung ist einfach einzurichten. Am aller einfachsten ist es mit ddev-local. Was ddev-local ist und wie du es installierst habe ich neulich in einem Beitrag hier im Blog beschrieben.

Ich gehe jetzt mal davon aus, dass du im Ordner meine-website arbeitest. Sagen wir es sieht bei dir in etwa so aus:

Ordnerstruktur im Projektordner

In der Datei public/css/main.css hast du aktuell deinen ganzen CSS-Code. Das ändern wir beide jetzt aber. Zuerst legen wir einen Ordner an, in welchem du dann deine Sass-Dateien speicherst. Ich lege meine Dateien immer im src Ordner in einem Unterordner Ressources und Sass ab. Mit dem Befehl $ mkdir src/Ressources src/Ressources/Sass wird diese Ordnerstruktur erstellt.

Jetzt fehlt dir noch deine erste Sass-Datei. Ein einfacher Code sollte ausreichen. Wie wäre es mit $ echo "\$blau: blue; body { background: \$blau }" >> src/Ressources/Sass/main.scss.

NPM Setup

Nun installierst du notwendigen npm Pakete. Als Erstes legst du ein npm package an (das ist quasi sowas wie deine composer.json in PHP Projekten). Dazu einfach $ npm init eingeben und den Aufforderungen folgen. Du kannst auch einfach immer nur Enter klicken und das Setup so schnell beenden. Es hat an dieser Stelle keine Auswirkungen auf den weiteren Verlauf. Wenn du dich mit den Angaben etwas vertrauter machen möchtest, dann schau bei npmjs in die Dokumentation.

Als Nächstes speicherst du die notwendigen Module (also die Scripte, die die eigentliche Arbeit machen) in deinem Projektordner, indem du den Befehl $ npm install -D node-sass nodemon ausführst. Der Flag -D bedeutet, dass du die Module für die Entwicklung benötigst.

Es dauert nun einige Zeit, bevor alle Pakete heruntergeladen und die Abhängigkeiten aufgelöst wurden. Wenn dies aber durch ist, öffnest du die package.json Datei ($ vim package.json). Dort musst du nun den Befehl für die Kompilierung hinzufügen. Dafür unter scripts es wie folgt ändern:

{ 
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "sass-compile": "node-sass --include-path scss src/Ressources/scss/main.scss --output-style compressed --output public/css/"
  }
}

Du hast damit eingerichtet, dass nach Eingabe des Befehls $ npm run sass-compile deine main.scss kompiliert und das fertige CSS in public/css/main.css gespeichert wird.

Damit du nicht immer den Befehl händisch ausführen musst, hast du oben schon das Paket nodemon installiert. Dieses Paket wird auf Änderungen in deinen Dateien achten und entsprechend deine CSS-Dateien neu kompilieren. Dafür musst du noch einmal in die package.json gehen und wie folgt ergänzen:

{ 
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "sass-compile": "node-sass --include-path scss src/Ressources/scss/main.scss --output-style compressed --output public/css/",
    "watch-sass-compile": "nodemon --legacy-watch --watch src/Ressources/scss -e scss -x \"npm run sass-compile\""
  }
}

Wenn du nun mit dem Kommando $ npm run watch-sass-compile dafür sorgst, dass nodemon aktiviert wird und auf Änderungen in deinem Sass-Ordner wartet, wird bei jeder Änderung innerhalb der .scss-Dateien der Kompilierungsvorgang neu gestartet.

Im nun neuem Befehl für nodemon, setzt du den Flag --legacy-watch ein. Dieser ist in einer Container-Umgebung (wie es bei ddev-local der Fall ist) notwendig. Sonst kann es passieren, dass die Änderungen nicht detektiert werden. Durch den Flag --watch PATH legst du fest, dass nur auf Änderungen im Ordner src/Ressources/scss/ geachtet werden soll. Durch -e scss beschränkst du die Überwachung weiterhin auf .scss-Dateien.

Wenn alles funktioniert, sollte mittlerweile eine main.css Datei im Ordner public/css/ angelegt worden sein. Wenn du alles genau wie hier beschrieben gemacht hast, sollte es in dieser wie folgt aussehen:

$ cat public/css/main.css
body { background: blue; }

sh: 1: npm run build-css: not found

Irgendwann wirst du deinen ddev-local neu starten. In diesem Fall wird nach dem Neustart die hier beschriebene Konfiguration nicht mehr funktionieren. Das liegt daran, dass gewisse Änderungen nicht dauerhaft in die ddev-local Container geschrieben werden. Aber das ist alles kein Problem, solange du deine package.json hast. In dieser Datei sind alle wichtigen und notwendigen Angaben gespeichert. Du musst in der Konsole nur noch einmal npm überreden, die Datei zu lesen und die Abhängigkeiten aufzulösen/installieren. Dies machst du mit dem Befehl $ npm i. Danach sollte alles wieder funktionieren.

Januar 12, 2021

Es wurden noch keine Kommentare verfasst, sei der erste!