SASS Schnellstart – Was ist ein Präprozessor?

CSS alleine hat bereits viel zu bieten, aber Stylesheets werden immer größer, komplexer und schwieriger zu pflegen. An dieser Stelle kann ein Präprozessor helfen. Mit Sass kannst du Features nutzen, die es in CSS noch nicht gibt, wie Variablen, Verschachtelung, Mixins, Vererbung und andere hilfreiche Features, die das Schreiben von CSSwieder freudiger machen .

Sobald du anfängst, mit Sass zu basteln, nimmt es deine Sass-Datei, verarbeitet diese zunächst (Prä-Prozessor) und speichert sie als normale CSS-Datei, die du auf deiner Webseite verwenden kannst.

SASS-Code in CSS-Code umwandeln

Der direkteste Weg, dies zu tun, ist in deinem Terminal (Kommandozeile). Sobald Sass installiert ist, kannst du deinen Sass-Code mit dem Befehl sass zu CSS kompilieren. Du musst Sass mitteilen, aus welcher Datei es kompilieren soll und wohin es das CSS ausgeben soll. Wenn du zum Beispiel sass input.scss output.css in deinem Terminal ausführst, wird eine einzelne Sass-Datei, input.scss, zu output.css kompiliert.

Dateien & Verzeichnisse mit SASS überwachen

Du kannst auch einzelne Dateien oder Verzeichnisse mit dem --watch Flag überwachen. Das watch Flag weist Sass an, deine Quelldateien auf Änderungen zu überwachen und CSS jedes Mal neu zu kompilieren, wenn du dein Sass speicherst. Wenn du deine input.scss Datei überwachen willst (anstatt sie manuell zu erstellen), fügst du einfach das watch Flag zu deinem Befehl hinzu, etwa so:

sass --watch input.scss output.css

Du kannst Verzeichnisse überwachen und ausgeben, indem du Ordnerpfade als deine Ein- und Ausgabe verwendest und sie mit einem Doppelpunkt trennst. Schau dir folgendes Beispiel an:

sass --watch app/sass:public/stylesheets

Sass würde alle Dateien im Ordner app/sass auf Änderungen überwachen und CSS in den Ordner public/stylesheets kompilieren.

Jetzt wo wir geklärt haben, was ein Präprozessor, wie Sass ist, gehen wir in der nächsten Lektion auf die häufige Frage ein, worin der Unterschied zwischen "SASS und SCSS" liegt.