SASS: CSS auf dem nächsten Level?

Mit CSS können Sie Webseiten nach Ihren Vorstellungen gestalten. Doch die Stylesheet-Sprache hat ihre Grenzen. Viele Webdesigner wünschen sich eine komfortablere Arbeitsweise bei der Gestaltung von Websites. Hier kommen CSS-Präprozessoren ins Spiel. Mithilfe einer Stylesheet-Sprache, die quasi eine Erweiterung zum zugrundeliegenden CSS ist, können Sie die Arbeit am Design stark vereinfachen. Die bekannteste dieser erweiterten Sprachen ist SASS. Was steckt hinter dem Syntactically Awesome Style Sheet?

Um zu verstehen, was SASS ist und warum man die Sprache überhaupt braucht, sollte man sich den Sinn von CSS klarmachen. Websites beruhen zunächst einmal auf der Auszeichnungssprache HTML. Möchte man in HTML Gestaltungen vornehmen, muss man den Inhalt direkt mit dem Design koppeln – auf jeder einzelnen HTML-Seite. HTML ist – einfach gesprochen – nicht für Design gedacht und daher auch auf diesem Gebiet sehr beschränkt. Das Cascading Style Sheet (CSS) legt die Darstellung von HTML-Seiten fest. Wie eine Schablone liegt CSS auf dem HTML-Code und definiert für jedes Element auf der Seite das Design: Schriftart, Textfarbe, Hintergrund – Webdesigner legen mit CSS alle Gestaltungselemente fest.

Um z. B. alle Überschriften in 22 px Calibri zu setzen, definieren Sie dies im Stylesheet, das Richtlinien für das Aussehen Ihrer Website gibt. Diese Regeln stehen üblicherweise in einer separaten Datei, auf die die HTML-Seiten verweisen. Das verkürzt die Angaben pro Seite enorm.

Doch CSS kennt Grenzen, die einem besonders beim langjährigen Arbeiten mit der Sprache klar werden. Der Vorteil von CSS ist gleichzeitig einer der Nachteile: Die Sprache gestaltet sich sehr einfach. SASS macht das Ganze etwas ausgefeilter und vereinfacht die Arbeit beim Erstellen des Designs ungemein.

Alle modernen Browser können CSS problemlos darstellen, doch das gilt nicht für SASS (das immerhin schon über 10 Jahre lang eingesetzt wird) oder andere erweiterte Stylesheet-Sprachen. Deshalb versteht sich SASS als Präprozessor. Der Code im SASS-Dokument wird erst in CSS umgewandelt, bevor das System den Quellcode und damit die Website ausliefert.

Zunächst einmal scheint es keine Notwendigkeit für SASS zu geben. Mit CSS konnte man schließlich die letzten Jahrzehnte gestaltungstechnisch tolle Seiten entwickeln. Auch wenn man fortan mit SASS arbeiten möchte, kommt man an CSS nicht vorbei. Die altbekannte Stylesheet-Sprache wird auch in Zukunft noch Grundlage der Darstellung bleiben. SASS und andere Sprachen sitzen nur auf dem Gerüst von CSS.

Mit SASS haben Sie allerdings einige Möglichkeiten, die Ihnen CSS allein nicht bietet:

• Variablen: Mit SASS lassen sich Informationen in Variablen speichern, um diese später wiederzuverwenden. So ist es z. B. möglich, einen Farbwert unter einer griffigeren Variablen zentral abzulegen.
• Mathematische Funktionen: In SASS lassen sich auch mathematische Operatoren wie +, -, *, / oder % verwenden. Damit beeinflussen Sie z. B. Größenangaben.
• Funktionen: Auch andere Funktionen erleichtern Ihnen die Arbeit am Design. Mit diesen lassen sich u. a. Farbwerte anpassen oder Listen analysieren.
• Schleifen: Ein weiterer Vorteil von SASS liegt darin, dass Sie Schleifen einsetzen können. Diese werden so oft wiederholt, bis ein von Ihnen definierter Status erreicht ist.
• Fallunterscheidungen: Ähnlich funktionieren die bedingten Anweisungen if und else. Nur wenn bestimmte Zustände eintreffen, werden die angegebenen Befehle ausgeführt.
• Mixins: Die sogenannten Mixins stellen Vorlagen dar. Diese kann man entweder selbst erstellen oder bei der Verwendung eines Frameworks einfach in den eigenen Code einbinden.
• Einrückungen: Das ursprüngliche SASS (im Gegensatz zum SCSS) arbeitet mit Einrückungen und Zeilenumbrüchen, um den Code zu strukturieren. Es sind keine Markierungen in Form von Klammern nötig, um Verschachtelungen anzuzeigen, oder Semikolons, um Zeilenenden zu markieren.
• Verschachtelungen: CSS lässt es nicht zu, im Code mit Verschachtelungen (Nesting) zu arbeiten. SASS hingegen gibt dem Nutzer die Möglichkeit, Abhängigkeiten auch visuell darzustellen, was Redundanz verringert und weniger Schreibaufwand macht.
• Vererbungen: Es ist möglich, Eigenschaften von einem Selektor zum anderen zu vererben. Das spart ebenfalls Schreibarbeit und hält den Code schlanker.
• Teildateien: Um Code-Elemente in einer SASS-Datei zu integrieren, können Sie auch sogenannte Partials verwenden. Dabei handelt es sich um Dateien, in denen nur wenige CSS-Zeilen enthalten sein müssen und die per Befehl in eine SASS-Datei importiert werden.

Für SASS existieren bereits einige hilfreiche Frameworks bzw. Bibliotheken. Compass oder Bourbon nehmen Ihnen einen großen Teil der Arbeit beim Gestalten einer Website ab.

Damit der erstellte SASS-Code auch den gewünschten Effekt hat, müssen Sie diesen zunächst in gewöhnliches CSS umwandeln. Die Kompilierung funktioniert ganz einfach über einen Kommandozeilenbefehl:

Dieser Befehl kompiliert den Quellcode aus der von Ihnen erstellten Datei beispiel.sass in eine neue CSS-Datei. Dabei wird die Syntax von SASS automatisch an die Regeln von CSS angepasst. So werden beispielsweise Vererbungen aufgelöst und die Syntax angepasst.

Die Arbeit an einer Website ist selten wirklich abgeschlossen und eventuell nehmen Sie regelmäßige Änderungen am Design vor. Deshalb gibt Ihnen SASS mit dem Parameter --watch die Möglichkeit, Ordner oder Dateien zu überwachen. Nehmen Sie Änderungen in diesen vor, kompiliert das System automatisch neu.

Es gibt nicht nur eine Syntax, in der Sie SASS verwenden können, sondern zwei: Zum einen hat man die ursprüngliche Form, die gern „indented syntax“ („eingerückte Syntax“) oder einfach „SASS“ genannt wird. Daneben gibt es eine neuere Variante, die sich stärker an den Vorgaben von CSS orientiert und die man deshalb Sassy CSS (SCSS) nennt – also CSS nach Art von SASS. Mit Version 3 von SASS hat man SCSS als offizielle Syntax festgelegt. Der größte Unterschied: die Verwendung von Klammern und Semikolons.

Die ursprüngliche SASS-Syntax arbeitet mit Einrückungen und Zeilenumbrüchen, ein Vorgehen nach dem Vorbild von YAML. Um eine Codezeile abzuschließen, reicht es, einen Zeilenumbruch zu machen – also die Enter-Taste zu drücken. Einrückungen funktionieren ganz einfach über den Tabulator. Durch Änderung der Position im Schriftbild werden also Gruppierungen gebildet – sogenannte Deklarationsblocks. Das geht bei CSS selbst nicht. Hier müssen geschweifte Klammern für die Gruppierungen und Semikolons für die Eigenschaftsdeklarationen benutzt werden. Und genau das ist auch bei SCSS notwendig.

So wird daraus ein Glaubenskrieg: Einige Nutzer schwören auf die einfache Handhabung des Original-SASS, bei der man beim Verschieben von Quelltextschnipseln nicht auf die richtige Setzung von Klammern achten muss und generell einen schlankeren, übersichtlicheren Code erzeugt. Insgesamt kommt man durch die „indented syntax“ mit weniger Zeichen und Zeilen aus. Die Anhänger von SCSS hingegen nehmen den zusätzlichen Aufwand gern in Kauf, denn dieser ähnelt mehr dem, was man ohnehin von CSS kennt.

SCSS ist eine Obermenge zu CSS, und das sorgt dafür, dass CSS-Code grundsätzlich auch in SCSS funktioniert – allerdings nicht andersherum. Die Funktionen von SASS sind dennoch noch voll enthalten. So lässt sich leichter mit beiden Sprachen gleichzeitig arbeiten. Zudem ist für Menschen, die ohnehin schon mit CSS arbeiten und sich an die Syntax gewöhnt haben, die Umstellung sehr viel leichter. Zwar unterstützt SASS beide Syntaxen, pro Projekt müssen Sie sich aber entscheiden: Um die verschiedenen Formate unterscheiden zu können, gibt man den Dateien entweder die Dateiendung .sass oder .scss.

SASS bringt einige Vorteile mit sich, doch der Präprozessor überzeugt nicht jeden. Die Pluspunkte liegen auf der Hand: Die Präprozessorsprache gibt dem Nutzer mehr Möglichkeiten beim Erstellen des Codes. Viele Webdesigner schätzen z. B. die Funktion, Farben in Variablen abzulegen, statt immer den Farbwert in einer hexadezimalen Zahl angeben zu müssen. Mixins, Variablen, Vererbungen und Nesting sorgen dafür, dass man sehr viel besser dem Prinzip „Don’t repeat yourself“ folgen kann als im traditionellen CSS. Diese Theorie plädiert dafür, Wiederholungen im Code zu vermeiden und damit den Quelltext schlanker zu halten. Zusätzlich verringert dies den Aufwand bei Änderungen massiv. Statt an vielen Stellen muss nur zentral an einer Position eine Änderung vorgenommen werden.

Die Nachteile von SASS treffen prinzipiell auf jeden Präprozessor zu und beziehen sich darauf, dass der erstellte Code zunächst kompiliert werden muss. Dies fügt einen weiteren Schritt in den Entwicklungsvorgang ein. Das macht den Prozess etwas langwieriger. Statt Anpassungen direkt in der CSS-Datei vornehmen zu können und die Auswirkungen gleich auf der Website zu sehen, müssen Veränderungen am Design zunächst ins CSS übersetzt werden. Dabei können sich Fehler einschleichen und das Debugging wird erschwert.

Zudem müssen Sie vor dem Einsatz von SASS – wie bei jeder Ihnen unbekannten Technik – Aufwand in das Erlernen der neuen Sprache stecken. Zusätzlich zu CSS, das man auf jeden Fall beherrschen sollte, ist also noch eine weitere Sprache zu meistern.

Neben SASS hat sich auch LESS in Entwicklerkreisen etabliert. Diese Stylesheet-Sprache orientiert sich stärker an CSS und ähnelt damit eher der Syntax von SCSS. Die beiden Präprozessoren teilen sich einige Eigenschaften: So sind sowohl in SASS als auch in LESS die Nutzung von Mixins und Variablen enthalten. Ein Unterschied liegt allerdings darin, dass SASS auf Ruby basiert und LESS JavaScript einsetzt. Aber auch das gibt keinem der beiden Präprozessoren einen Vorteil gegenüber dem anderen.

Wirkliche Unterschiede findet man aber in den logischen Funktionen: LESS gibt Nutzern die Möglichkeit, Mixins nur dann zu aktivieren, wenn spezifische Situationen eintreffen. Das ist ein hilfreiches Feature, allerdings ist damit die Verwendung von logischen Verknüpfungen bei LESS schon ausgeschöpft. SASS hingegen bietet Schleifen und Fallunterscheidungen, wie man sie auch von Programmiersprachen kennt.

Bei SASS steht es Nutzern frei, ob sie lieber die „indented syntax“ oder SCSS verwenden. So kann jeder Entwickler selbst entscheiden, ob er sich von den CSS-Regeln entfernen möchte oder lieber enger am Original bleibt. Bei LESS gibt es diese Wahlmöglichkeit nicht. Hier müssen sich Nutzer an die altbekannten Regularien halten. So ist Code in LESS automatisch auch Obermenge von CSS: Jeglicher in CSS formulierter Quelltext funktioniert auch in LESS – genau wie bei SCSS.

SASS ist sehr viel beliebter unter Webdesignern. Dies kann allerdings auch daran liegen, dass SASS ein wenig älter ist. LESS hatte zunächst noch Unterstützung durch das geschätzte Frontend-Framework Bootstrap, das auf den jüngeren Präprozessor setzte. Doch mit Version 4 hat das Projekt offiziell auf SASS gewechselt, was die Popularität der Syntactically Awesome Style Sheets noch erhöhen dürfte.