Warum ich SCSS nicht mehr missen möchte

Schickes CSS mit Sass

Ich beschäftige mich mit Redaktionsprozessen und deren Optimierung. D. h. ich werde immer hellhörig, wenn es eine Chance gibt, etwas zu vereinfachen oder besser zu strukturieren.

In einem anderen Teil meines Jobs gestalte ich Online- und mobile Medien. Dort spielt HTML 5 eine große Rolle. Für dessen Gestaltung verwendet man CSS, und mit CSS habe ich als jemand, der in Strukturen denkt, ein Problem.

Mein Problem mit CSS

CSS bietet kaum Möglichkeiten, zu strukturieren. Es ist auf schnelle Verarbeitung durch den Browser hin optimiert, Wartbarkeit hat nicht Priorität. Im Wesentlichen bestehen CSS-Dateien deswegen aus einer linearen Abfolge von Regelsätzen, die bestenfalls in Blöcke für unterschiedliche Zielmedien gruppiert sind, also z. B. für Mobilgeräte oder Drucker. Alle Angaben sind explizit. Das bedeutet, jede Farbangabe, die mehr als ein Element betrifft, muss mehrfach identisch hingeschrieben werden. Es gibt keine Variablen. Damit werden komplexe Stylesheets schnell unübersichtlich und sind schwierig zu pflegen.

Eine Lösung

Konzeptionell lässt sich die Unstrukturiertheit von CSS nur rudimentär behandeln: Man kann die CSS-Regeln auf mehrere Dateien verteilen. Effektiver wäre es aber, CSS zumindest für die Erfassung um gängige Programmierkonzepte zu erweitern wie Variablen, Vererbung, Hierarchien oder Berechnungsfunktionen.

Tatsächlich haben sich seit Längerem mehrere Formate etabliert, die genau das leisten. Beispiele sind LESS, Coffeescript oder SASS. Das Format SCSS, das ich hier vorstellen will, ist eine syntaktisch andere Geschmacksrichtung von SASS. Diese Sprachen erlauben es, Regelsätze strukturiert zu erfassen, sind aber leider für Browser nicht lesbar. Deshalb werden sie mit sog. Präprozessoren ausgeliefert. Präprozessoren sind Konverter, die Dateien vor dem Ausliefern an den eigentlichen Prozessor (hier: den Browser) verarbeiten. Somit besteht SCSS aus zwei Komponenten:

• einem Format, bei dem es sich um eine funktionale Erweiterung von CSS handelt.
• einem Prozessor, der für unterschiedliche Betriebssysteme unter einer MIT-Opensource-Lizenz frei erhältlich ist.

Sassy CSS

Ich möchte die wesentlichen Features von SASS (die Abkürzung steht für „Syntactically Awesome Style Sheets“) bzw. SCSS („Sassy CSS“) hier nur kurz anreißen.

• Regelsätze schachteln: Angaben beispielsweise für Links, die im Footer oder im Header stehen, lassen sich innerhalb des Regelsatzes für allgemeine Links platzieren, anstatt sich irgendwo über die CSS-Datei zu verteilen.
• Abgeleitete Klassen: Formate für Warn- und Gefahrenhinweis-Boxen lassen sich von einer gemeinsamen, allgemeineren Klasse Hinweis-Box ableiten, anstatt alle Angaben zu wiederholen oder in mehrere gemeinsame und spezifische Regelsätze zu verteilen.
• Ausgelagerte Dateifragmente, Partials: In sich geschlossene Teilbereiche, beispielsweise die Regelsätze für das Navigationsmenü, lassen sich in einzelne Dateien auslagern. Das geht auch mit CSS, wo aber jede ausgelagerte Datei im HTML-Kopf explizit referenziert werden muss. Der SCSS-Präprozessor fasst die Partials zu einer einzigen Datei zusammen, was sowohl die Verwaltung der Referenzen im HTML erleichtert als auch die Performance verbessert.
• Variablen: Werte, aber auch ganze Regeln lassen sich in Variablen deklarieren. Wiederkehrende Gestaltungselemente oder CI-Farben lassen sich somit an einer Stelle verwalten und bei Bedarf zentral austauschen.
• Operationen und Funktionen: SCSS stellt eine ganze Reihe von Manipulationen und Berechnungen zur Verfügung. Das Spektrum reicht von einfachen Farbänderungen wie darken($color) über Textfunktionen und Mathematik bis hin zur Verarbeitung von assoziativen Listen wie mit map_get($map, $key).
• Mixins: Mixins sind aufrufbare Makros, denen man Parameter mitgeben kann. Um auf das Beispiel mit den Hinweis-Boxen zurückzukommen: Ein Mixin hinweisbox($severity, $symbol) kann die Darstellungsregeln für eine Hinweis-Box enthalten, mit Parametern für die Gefahrenstufe und das anzuzeigende ISO-Symbol. Die Gestaltung eines Gefahrenhinweises mit Augenschutz kann sich dann auf den Aufruf @include hinweisbox(‚Gefahr‘,‘Laser‘) beschränken.

SCSS im Alltag

Wir verwenden SCSS mittlerweile seit mehreren Jahren in praktisch allen Projekten, in denen CSS eine Rolle spielt, und bereuen den Schritt in keiner Weise. Die Aufwände für Installation und Einarbeitung waren kaum der Rede wert. SCSS ist anders als SASS eine reine Erweiterung der CSS-Syntax, womit der Einstieg sehr schnell vonstattenging.

Die Features, die wir am meisten nutzen und die uns massiv Zeit ersparen, sind Variablen und Partials, die besonders in Projekten mit mehreren Layouts (Kunde und Tochterfirma, Eigenmarke und OEM) ihren Nutzen ausspielen. Und, ganz wesentlich: das Schachteln von Regelsätzen, das ein sinnvolles Strukturieren der Stylesheets erst ermöglicht und nebenbei sehr viel Schreibarbeit erspart.

Eine nicht zu unterschätzende Nebenwirkung dieser Strukturierung ist, dass wir automatisch sehr viel systematischer an die Gestaltung der Stylesheets herangehen als zu Zeiten, als wir nur einzelne Regeln hintereinander weggeschrieben haben. Da war es schnell passiert, dass der allgemeine Regelsatz für Links und der spezielle Regelsatz für Links im Footer tausend Zeilen weit auseinander standen. Mit SCSS erhöht sich die Wartbarkeit der Lösung deshalb ganz ungemein.

Was den Übersetzungsvorgang von SCSS nach CSS angeht: Wir haben das in den beiden Entwicklungsumgebungen, mit denen wir arbeiten, PhpStorm und Visual Studio, über Plugins so eingerichtet, dass der Präprozessor beim Speichern der SCSS-Datei automatisch anspringt. Das bedeutet, dass die generierten CSS-Dateien nebenbei und ohne unser explizites Zutun entstehen. Der administrative Mehraufwand besteht also vor allem im einmaligen Einrichten der jeweiligen Plugins.

Fazit

Wir haben SCSS für meinen Geschmack viel zu spät entdeckt, als es bereits jahrelang zur Verfügung stand. Mittlerweile ist es aber für mich und mein Team aus dem Arbeitsalltag nicht mehr wegzudenken, wenn es um Online- und mobile Medien geht. Auch wenn wir seine Möglichkeiten nicht bis ins Letzte ausreizen, sind bereits die wenigen Key Features, die wir ausführlich nutzen, eine erhebliche Erleichterung beim strukturierten Entwickeln und Warten von Stylesheets. Wenn Sie also mit CSS im Vanillegeschmack arbeiten, und gerne effizienter damit umgehen möchten, kann ich Ihnen dringend einen Blick auf SCSS empfehlen.