SASS: CSS auf dem nächsten Level?

Mit CSS können Sie Webseiten nach Ihren Vor­stel­lun­gen gestalten. Doch die Style­sheet-Sprache hat ihre Grenzen. Viele Web­de­si­gner wünschen sich eine kom­for­ta­ble­re Ar­beits­wei­se bei der Ge­stal­tung von Websites. Hier kommen CSS-Prä­pro­zes­so­ren ins Spiel. Mithilfe einer Style­sheet-Sprache, die quasi eine Er­wei­te­rung zum zu­grun­de­lie­gen­den CSS ist, können Sie die Arbeit am Design stark ver­ein­fa­chen. Die be­kann­tes­te dieser er­wei­ter­ten Sprachen ist SASS. Was steckt hinter dem Syn­tac­ti­cal­ly Awesome Style Sheet?

Um zu verstehen, was SASS ist und warum man die Sprache überhaupt braucht, sollte man sich den Sinn von CSS klar­ma­chen. Websites beruhen zunächst einmal auf der Aus­zeich­nungs­spra­che HTML. Möchte man in HTML Ge­stal­tun­gen vornehmen, muss man den Inhalt direkt mit dem Design koppeln – auf jeder einzelnen HTML-Seite. HTML ist – einfach ge­spro­chen – nicht für Design gedacht und daher auch auf diesem Gebiet sehr be­schränkt. Das Cascading Style Sheet (CSS) legt die Dar­stel­lung von HTML-Seiten fest. Wie eine Schablone liegt CSS auf dem HTML-Code und definiert für jedes Element auf der Seite das Design: Schrift­art, Textfarbe, Hin­ter­grund – Web­de­si­gner legen mit CSS alle Ge­stal­tungs­ele­men­te fest.

Um z. B. alle Über­schrif­ten in 22 px Calibri zu setzen, de­fi­nie­ren Sie dies im Style­sheet, das Richt­li­ni­en für das Aussehen Ihrer Website gibt. Diese Regeln stehen üb­li­cher­wei­se 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 lang­jäh­ri­gen Arbeiten mit der Sprache klar werden. Der Vorteil von CSS ist gleich­zei­tig einer der Nachteile: Die Sprache gestaltet sich sehr einfach. SASS macht das Ganze etwas aus­ge­feil­ter und ver­ein­facht die Arbeit beim Erstellen des Designs ungemein.

Alle modernen Browser können CSS pro­blem­los dar­stel­len, doch das gilt nicht für SASS (das immerhin schon über 10 Jahre lang ein­ge­setzt wird) oder andere er­wei­ter­te Style­sheet-Sprachen. Deshalb versteht sich SASS als Prä­pro­zes­sor. Der Code im SASS-Dokument wird erst in CSS um­ge­wan­delt, bevor das System den Quellcode und damit die Website aus­lie­fert.

Zunächst einmal scheint es keine Not­wen­dig­keit für SASS zu geben. Mit CSS konnte man schließ­lich die letzten Jahr­zehn­te ge­stal­tungs­tech­nisch tolle Seiten ent­wi­ckeln. Auch wenn man fortan mit SASS arbeiten möchte, kommt man an CSS nicht vorbei. Die alt­be­kann­te Style­sheet-Sprache wird auch in Zukunft noch Grundlage der Dar­stel­lung bleiben. SASS und andere Sprachen sitzen nur auf dem Gerüst von CSS.

Mit SASS haben Sie al­ler­dings einige Mög­lich­kei­ten, die Ihnen CSS allein nicht bietet:

• Variablen: Mit SASS lassen sich In­for­ma­tio­nen in Variablen speichern, um diese später wie­der­zu­ver­wen­den. So ist es z. B. möglich, einen Farbwert unter einer grif­fi­ge­ren Variablen zentral abzulegen.
• Ma­the­ma­ti­sche Funk­tio­nen: In SASS lassen sich auch ma­the­ma­ti­sche Ope­ra­to­ren wie +, -, *, / oder % verwenden. Damit be­ein­flus­sen Sie z. B. Grö­ßen­an­ga­ben.
• Funk­tio­nen: Auch andere Funk­tio­nen er­leich­tern Ihnen die Arbeit am Design. Mit diesen lassen sich u. a. Farbwerte anpassen oder Listen ana­ly­sie­ren.
• Schleifen: Ein weiterer Vorteil von SASS liegt darin, dass Sie Schleifen einsetzen können. Diese werden so oft wie­der­holt, bis ein von Ihnen de­fi­nier­ter Status erreicht ist.
• Fall­un­ter­schei­dun­gen: Ähnlich funk­tio­nie­ren die bedingten An­wei­sun­gen if und else. Nur wenn bestimmte Zustände ein­tref­fen, werden die an­ge­ge­be­nen Befehle aus­ge­führt.
• Mixins: Die so­ge­nann­ten Mixins stellen Vorlagen dar. Diese kann man entweder selbst erstellen oder bei der Ver­wen­dung eines Frame­works einfach in den eigenen Code einbinden.
• Ein­rü­ckun­gen: Das ur­sprüng­li­che SASS (im Gegensatz zum SCSS) arbeitet mit Ein­rü­ckun­gen und Zei­len­um­brü­chen, um den Code zu struk­tu­rie­ren. Es sind keine Mar­kie­run­gen in Form von Klammern nötig, um Ver­schach­te­lun­gen an­zu­zei­gen, oder Se­mi­ko­lons, um Zei­len­en­den zu markieren.
• Ver­schach­te­lun­gen: CSS lässt es nicht zu, im Code mit Ver­schach­te­lun­gen (Nesting) zu arbeiten. SASS hingegen gibt dem Nutzer die Mög­lich­keit, Ab­hän­gig­kei­ten auch visuell dar­zu­stel­len, was Redundanz ver­rin­gert und weniger Schreib­auf­wand macht.
• Ver­er­bun­gen: Es ist möglich, Ei­gen­schaf­ten von einem Selektor zum anderen zu vererben. Das spart ebenfalls Schreib­ar­beit und hält den Code schlanker.
• Teil­da­tei­en: Um Code-Elemente in einer SASS-Datei zu in­te­grie­ren, können Sie auch so­ge­nann­te 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 im­por­tiert werden.

Für SASS exis­tie­ren bereits einige hilf­rei­che Frame­works bzw. Bi­blio­the­ken. Compass oder Bourbon nehmen Ihnen einen großen Teil der Arbeit beim Gestalten einer Website ab.

Damit der erstellte SASS-Code auch den ge­wünsch­ten Effekt hat, müssen Sie diesen zunächst in ge­wöhn­li­ches CSS umwandeln. Die Kom­pi­lie­rung funk­tio­niert ganz einfach über einen Kom­man­do­zei­len­be­fehl:

Dieser Befehl kom­pi­liert den Quellcode aus der von Ihnen er­stell­ten Datei beispiel.sass in eine neue CSS-Datei. Dabei wird die Syntax von SASS au­to­ma­tisch an die Regeln von CSS angepasst. So werden bei­spiels­wei­se Ver­er­bun­gen aufgelöst und die Syntax angepasst.

Die Arbeit an einer Website ist selten wirklich ab­ge­schlos­sen und eventuell nehmen Sie re­gel­mä­ßi­ge Än­de­run­gen am Design vor. Deshalb gibt Ihnen SASS mit dem Parameter --watch die Mög­lich­keit, Ordner oder Dateien zu über­wa­chen. Nehmen Sie Än­de­run­gen in diesen vor, kom­pi­liert das System au­to­ma­tisch neu.

Es gibt nicht nur eine Syntax, in der Sie SASS verwenden können, sondern zwei: Zum einen hat man die ur­sprüng­li­che Form, die gern „indented syntax“ („ein­ge­rück­te Syntax“) oder einfach „SASS“ genannt wird. Daneben gibt es eine neuere Variante, die sich stärker an den Vorgaben von CSS ori­en­tiert und die man deshalb Sassy CSS (SCSS) nennt – also CSS nach Art von SASS. Mit Version 3 von SASS hat man SCSS als of­fi­zi­el­le Syntax fest­ge­legt. Der größte Un­ter­schied: die Ver­wen­dung von Klammern und Se­mi­ko­lons.

Die ur­sprüng­li­che SASS-Syntax arbeitet mit Ein­rü­ckun­gen und Zei­len­um­brü­chen, ein Vorgehen nach dem Vorbild von YAML. Um eine Codezeile ab­zu­schlie­ßen, reicht es, einen Zei­len­um­bruch zu machen – also die Enter-Taste zu drücken. Ein­rü­ckun­gen funk­tio­nie­ren ganz einfach über den Tabulator. Durch Änderung der Position im Schrift­bild werden also Grup­pie­run­gen gebildet – so­ge­nann­te De­kla­ra­ti­ons­blocks. Das geht bei CSS selbst nicht. Hier müssen ge­schweif­te Klammern für die Grup­pie­run­gen und Se­mi­ko­lons für die Ei­gen­schafts­de­kla­ra­tio­nen benutzt werden. Und genau das ist auch bei SCSS notwendig.

So wird daraus ein Glau­bens­krieg: Einige Nutzer schwören auf die einfache Hand­ha­bung des Original-SASS, bei der man beim Ver­schie­ben von Quell­text­schnip­seln nicht auf die richtige Setzung von Klammern achten muss und generell einen schlan­ke­ren, über­sicht­li­che­ren Code erzeugt. Insgesamt kommt man durch die „indented syntax“ mit weniger Zeichen und Zeilen aus. Die Anhänger von SCSS hingegen nehmen den zu­sätz­li­chen 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 grund­sätz­lich auch in SCSS funk­tio­niert – al­ler­dings nicht an­ders­her­um. Die Funk­tio­nen von SASS sind dennoch noch voll enthalten. So lässt sich leichter mit beiden Sprachen gleich­zei­tig arbeiten. Zudem ist für Menschen, die ohnehin schon mit CSS arbeiten und sich an die Syntax gewöhnt haben, die Um­stel­lung sehr viel leichter. Zwar un­ter­stützt SASS beide Syntaxen, pro Projekt müssen Sie sich aber ent­schei­den: Um die ver­schie­de­nen Formate un­ter­schei­den zu können, gibt man den Dateien entweder die Da­tei­endung .sass oder .scss.

SASS bringt einige Vorteile mit sich, doch der Prä­pro­zes­sor überzeugt nicht jeden. Die Plus­punk­te liegen auf der Hand: Die Prä­pro­zes­sor­spra­che gibt dem Nutzer mehr Mög­lich­kei­ten beim Erstellen des Codes. Viele Web­de­si­gner schätzen z. B. die Funktion, Farben in Variablen abzulegen, statt immer den Farbwert in einer he­xa­de­zi­ma­len Zahl angeben zu müssen. Mixins, Variablen, Ver­er­bun­gen und Nesting sorgen dafür, dass man sehr viel besser dem Prinzip „Don’t repeat yourself“ folgen kann als im tra­di­tio­nel­len CSS. Diese Theorie plädiert dafür, Wie­der­ho­lun­gen im Code zu vermeiden und damit den Quelltext schlanker zu halten. Zu­sätz­lich ver­rin­gert dies den Aufwand bei Än­de­run­gen massiv. Statt an vielen Stellen muss nur zentral an einer Position eine Änderung vor­ge­nom­men werden.

Die Nachteile von SASS treffen prin­zi­pi­ell auf jeden Prä­pro­zes­sor zu und beziehen sich darauf, dass der erstellte Code zunächst kom­pi­liert werden muss. Dies fügt einen weiteren Schritt in den Ent­wick­lungs­vor­gang ein. Das macht den Prozess etwas lang­wie­ri­ger. Statt An­pas­sun­gen direkt in der CSS-Datei vornehmen zu können und die Aus­wir­kun­gen gleich auf der Website zu sehen, müssen Ver­än­de­run­gen am Design zunächst ins CSS übersetzt werden. Dabei können sich Fehler ein­schlei­chen und das Debugging wird erschwert.

Zudem müssen Sie vor dem Einsatz von SASS – wie bei jeder Ihnen un­be­kann­ten Technik – Aufwand in das Erlernen der neuen Sprache stecken. Zu­sätz­lich zu CSS, das man auf jeden Fall be­herr­schen sollte, ist also noch eine weitere Sprache zu meistern.

Neben SASS hat sich auch LESS in Ent­wick­ler­krei­sen etabliert. Diese Style­sheet-Sprache ori­en­tiert sich stärker an CSS und ähnelt damit eher der Syntax von SCSS. Die beiden Prä­pro­zes­so­ren teilen sich einige Ei­gen­schaf­ten: So sind sowohl in SASS als auch in LESS die Nutzung von Mixins und Variablen enthalten. Ein Un­ter­schied liegt al­ler­dings darin, dass SASS auf Ruby basiert und LESS Ja­va­Script einsetzt. Aber auch das gibt keinem der beiden Prä­pro­zes­so­ren einen Vorteil gegenüber dem anderen.

Wirkliche Un­ter­schie­de findet man aber in den logischen Funk­tio­nen: LESS gibt Nutzern die Mög­lich­keit, Mixins nur dann zu ak­ti­vie­ren, wenn spe­zi­fi­sche Si­tua­tio­nen ein­tref­fen. Das ist ein hilf­rei­ches Feature, al­ler­dings ist damit die Ver­wen­dung von logischen Ver­knüp­fun­gen bei LESS schon aus­ge­schöpft. SASS hingegen bietet Schleifen und Fall­un­ter­schei­dun­gen, wie man sie auch von Pro­gram­mier­spra­chen kennt.

Bei SASS steht es Nutzern frei, ob sie lieber die „indented syntax“ oder SCSS verwenden. So kann jeder Ent­wick­ler selbst ent­schei­den, ob er sich von den CSS-Regeln entfernen möchte oder lieber enger am Original bleibt. Bei LESS gibt es diese Wahl­mög­lich­keit nicht. Hier müssen sich Nutzer an die alt­be­kann­ten Re­gu­la­ri­en halten. So ist Code in LESS au­to­ma­tisch auch Obermenge von CSS: Jeglicher in CSS for­mu­lier­ter Quelltext funk­tio­niert auch in LESS – genau wie bei SCSS.

SASS ist sehr viel beliebter unter Web­de­si­gnern. Dies kann al­ler­dings auch daran liegen, dass SASS ein wenig älter ist. LESS hatte zunächst noch Un­ter­stüt­zung durch das ge­schätz­te Frontend-Framework Bootstrap, das auf den jüngeren Prä­pro­zes­sor setzte. Doch mit Version 4 hat das Projekt offiziell auf SASS ge­wech­selt, was die Po­pu­la­ri­tät der Syn­tac­ti­cal­ly Awesome Style Sheets noch erhöhen dürfte.