SASS für Einsteiger - Teil1: Hintergründe & Installation

Jeder der gerne und viel mit CSS arbeitet kommt früher oder später an gewisse Grenzen. Insbesondere wenn man mit mehreren Personen zusammen an größeren Projekten arbeitet. Aber auch bei kleinen Projekten gibt es immer wieder diese Momente in denen man denkt: "Das könnte auch einfacher und logischer sein". Und: "Warum muss ich dass alles immer wieder und wieder eingeben?"

Hier kommt SASS ins Spiel. SASS steht für "Syntactically Awesome StyleSheets" und ist ein sogenannter CSS Präprozessor. Präprozessor weil aus einer SASS Datei eine CSS Datei erzeugt wird, BEVOR diese auf dem eigentlichen Server zum Einsatz kommt. Es geht also nicht darum irgendetwas auf Server- oder Clientseite zu verbessern oder zu optimieren. Es geht darum schneller, einfacher, effektiver und besser CSS Dateien lokal zu erstellen und zu pflegen. Das Endergebnis ist dann (meist jedenfalls) eine saubere CSS Datei die auf den Server geschoben werden kann. Eine SASS Datei wird also nur intern genutzt um die Entwicklung zu vereinfachen und ist kein Ersatz für eine CSS Datei.

Was macht denn SASS nun?

SASS ist eine Meta Sprache die Elemente einer Programmiersprache dazu nutzt CSS Dateien zu erzeugen. Klingt kompliziert. Ist es aber eigentlich gar nicht. Stellt euch einfach mal vor ihr könntent Variablen nutzen. Ein Farbwert einmal anlegen, immer wieder verwenden und wenn sich dieser dann mal ändert nur an einer Stelle anpassen. Keine langwierige Suchen&Ersetzen "Schnitzeljagd" mehr. Juhu! Stellt euch weiterhin mal vor ihr könntet mit CSS Rechnen. H1 überschriften sollen immer 3x größer sein als die Standart-Schriftgröße? Auch kein Problem. Einmal die Formel eingeben. Ändert sich dann die Ausgangsgröße der Schrift ändert sich auch die Größe der H1 Überschrift ohne das es einen weiteren Arbeitsschritt bedarf. Es können sogar Farbwerte berechnet werden. Farben können aufgehellt oder abgedunkelt werden, etc. Auch das organisieren und sortieren verschiedener CSS Dateien macht so mehr Spaß. Denn eigentlich würde es ja Sinn machen alles in eine große Datei zu packen. Schließlich muß der Server dann nur ein Request absetzen. Aber wirklich effektiv mit einer riesen CSS Datei mit mehreren tausend Zeilen zu arbeiten fällt schwer. Mit SASS legt man einfach viele kleine, sauber sortierte und wohlbedacht benannte SASS Dateien an, die dann an Ende in eine große CSS Datei überführt werden. Dies sind nur einige der Vorteile von SASS zu CSS.

.sass oder .scss als Dateiändung? Die Dateiändung bestimmt den Syntax der benutzt werden muss. Der Syntax von .scss gleicht viel mehr dem von CSS und hat den Vorteil das dadurch eben auch CSS Code genutzt werden kann. Ihr könnt also einer bestehenden CSS Datei einfach die Endung ".scss" geben und fertig. Dann könnt ihr nach und nach die Vorteile von SASS nutzen. Bei einer ".sass" Datei muss bereits vorhandener CSS Code komplett umgebaut werden. Daher ist der .scss Syntax meiner Meinung nach im Normalfall zu bevorzugen. Beide Syntax Formen sind in SASS selber enthalten. Ihr müßt also ncihts weiter machen als euch für eine Form und eine Dateiendung zu entscheiden. Alle folgenden Beispiele beziehen sich auf .scss Dateien und wenn ich von SASS Dateien spreche meine ich ebenso Dateien die mit .scss enden.

Vorarbeit: Lokal Ruby installieren

SASS ist in Ruby geschrieben. Um SASS nutzen zu können muss zunächst Ruby installiert werden.

Linux

Unter Linux geht das ganz einfach mit folgendem Shell Aufruf:

sudo su -c "gem install sass"

Mac OSX

Unter Mac OSX ist Ruby bereit sinstalliert. Es muss nichts weiter gemacht werden.

Windows

Unter Windows läßt sich Ruby am einfachsten mit dem Ruby Installer installieren.

SASS auf der Kommandozeilen-Ebene installieren

Um nun SASS selber zu installieren müßt ihr euer Terminal öffnen. Linux Usern muss ich wohl nicht erklären wie das geht. Mac OSX User können einfach oben rechts auf das Lupen Icon klicken und nach "Terminal" suchen und die gefundene Anwendung dann öffnen. Gebt dann im Terminal folgendes ein:

gem install sass

und SASS wird installiert. Kommt es hier zu Fehlermeldungen sollte es genügen SASS mit dem sudo Kommando zu installieren:

sudo gem install sass

SASS kompilieren

Wie bereits eingangs erwähnt wird aus einer SASS Datei eine fertige CSS Datei "berechnet". Dafür gibt es die verschiedensten Wege. Z.B. gibt es dazu GUI Tools wie Scout und Koala, Task Runner wie Grunt oder Gulp ( <- mein Favorit), Plugins für fast jeden Editor (Sublime, Coda etc.), jede IDE und natürlich die herkömmliche Methode über das Terminal. Im Rahmen dieses Artikels werde ich den letzten Fall beschreiben. Schließlich befinden wir uns ja gerade im Terminal und alle anderen Methoden hängen von der gewählten Entwicklungsumgebung ab. Nehmen wir einmal an ihr habt ein Projektordner angelegt (nennen wir ihn "/projekt") und in diesem einen Unterordner für eure .scss Dateien mit Namen "/sass" in dem die Datei style1.scss und style2.scss liegen. Wechselt jetzt im Terminal in euer Projektverzeichnis und gebt folgendes ein:

sass --watch projekt/sass

Von nun an wird das "/sass" Verzeichnis überwacht. Wird an einer Datei mit der Endung .scss oder .sass etwas geändert wird diese automatisch kompiliert und als .css Datei ausgegeben. In unserem Fall werden automtisch zwei Dateien mit den Namen "style1.css" und "style2.css" angelegt. Will man die CSS Dateien in ein separaten Unterordner unterbringen gibt man einfach folgendes ein:

sass --watch projekt/sass:projekt/css

Das Verzeichnis VOR dem : gibt die Herkunft der SASS Dateien an (den Input), dass Verzeichnis NACH dem : gibt das Zielverzeichnis für die fertigen CSS Dateien an (den Output).

Ein kleines Beispiel zum Schluss

Um das eben beschriebende einmal praktisch einzusetzen greifen wir einfach das Beispiel von oben noch einmal auf: Stellen wir uns vor, wie gehabt, wir haben einen "/projekt" Ordner mit den Unterordnern "/css" sowie "/sass". In dem "/sass" Ordner legen wir eine Datei mit dem Namen "style.scss" an und schreiben folgendes hinein:

$primary-color: #000000;

body { color: $primary-color; }

blockquote { border-left:3px solid $primary-color; }

und speichern diese dann. Zu den eigentlichen Möglichkeiten mit SASS komme ich in einem späteren Artikel. Dieses Beispiel macht aber schon die einfach Funktionsweise von Variablen deutlich. Wohl einer der wichtigsten Vorteile von SASS gegenüber CSS. Wenn ihr jetzt den oben genannten Terminal Befehl:

sass --watch projekt/sass:projekt/css

bereits richtig eingegeben habt erscheint automatisch, wie von Zauberhand, eine CSS Datei mit dem Namen "style.css" im "/css" Ordner mit folgendem Inhalt:

body { color: #000000; } blockquote { border-left:3px solid #000000; }

Und damit habt ihr dann auch schon eure erste CSS Datei aus SASS erzeugt.

Fazit

Und das war es auch schon für den Einstieg. Probiert am besten selber mit der SASS Datei herum und bindet die CSS Datei in ein HTML Dokument ein. Gebt z.B. als Wert für die Variable $primary-color mal einen anderen Farbwert ein und ihr seht wie sich der Output verändert. Bei Interesse werde ich in Zukunft weitere Artikel zum Thema schreiben und die Möglichkeiten und Feinheiten von SASS näher beleuchten. Bis dahin viel Spaß mit dem rum- und ausprobieren!