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 Semikolons genutzt, 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. <a href="https://www.meagainsttheweb.de/webentwicklung-mit-ddev-local-kleines-einsteigertutorial" title="ddev-local Einführung und Setupanleitung">Was ddev-local ist und wie du es installierst, habe ich neulich in einem Beitrag hier im Blog beschrieben</a>.

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

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 "Resources" und "Sass" ab. Mit dem Befehl $ mkdir src/Resources src/Resources/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/Resources/Sass/main.scss.

NPM Setup

Nun installierst du notwendige 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 Skripte, 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 änderst du es wie folgt:

{ 
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "sass-compile": "node-sass --include-path scss src/Resources/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 manuell 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/Resources/scss/main.scss --output-style compressed --output public/css/",
    "watch-sass-compile": "nodemon --legacy-watch --watch src/Resources/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/Resources/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.