CSS-Präprozessoren im Vergleich

CSS-Präprozessoren ergänzen CSS mit Variablen, Funktionen und Mixins zu einer runden Sprache und helfen, den Code schlank zu halten. Die populären Projekte LESS, Sass und Stylus decken sich zu 80 Prozent in ihren Funktionen, die restlichen 20 liegen in den Details.

In Pocket speichern vorlesen Druckansicht 7 Kommentare lesen
Lesezeit: 16 Min.
Von
  • Roberto Bez
Inhaltsverzeichnis

CSS-Präprozessoren ergänzen CSS mit Variablen, Funktionen und Mixins zu einer runden Sprache und helfen, den Code schlank zu halten. Die populären Projekte LESS, Sass und Stylus decken sich zu 80 Prozent in ihren Funktionen, die restlichen 20 liegen in den Details.

Viele kleine und große Webanwendungen nutzen das Konzept der CSS-Präprozessoren seit mehreren Jahren. Und trotzdem wird immer noch vor jedem Projektstart gründlich recherchiert und evaluiert, ob LESS, Sass oder doch Stylus die perfekte Wahl ist. Von den persönlichen Vorlieben abgesehen, bieten alle drei Kandidaten ein ähnliches Spektrum an Möglichkeiten und die Entscheidung fällt meist anhand von Details.

Der Sinn von CSS lässt sich in einem Satz zusammenfassen: die Elemente eines Dokuments mittels Selektoren und Attribute in Form bringen. Während der Einsatz für Designer ohne technischen Hintergrund ein Vorteil sein kann, ist CSS auf der anderen Seite eine wenig mächtige Sprache, die einem der wichtigsten Programmierprinzipien widerspricht. Entgegen dem DRY-Prinzip (Don't repeat yourself), sind Eigenschaften für jeden Selektor zu wiederholen.

CSS-Präprozessoren eröffnen in dem Zusammenhang eine völlig neue Welt: Mithilfe von Variablen, Mixins und Funktionen lassen sich plötzlich die einmal definierten Eigenschaften und Patterns wieder und wieder verwenden.

CSS-Präprozessoren sind nicht das Allheilmittel für schlechten Code, sie verpacken ihn nur schöner. Es ist also reiner Aberglaube, dass CSS und somit die Webseite durch den bloßen Einsatz profitiert. Folgender Code zeigt ein typisches Beispiel:

.container {
font-size: 12px;
}

.container .wichtig {
font-size: 14px;
}

.container .wichtig span {
color: red;
}

Und einfach mittels Präprozessor:

.container {
font-size: 12px;
.wichtig {
font-size: 14px;
span {
color: red;
}
}
}

Die Klasse container wird nicht mehr wiederholt und der Code ist auf den ersten Blick schöner und vor allem aufgeräumter. Eine solch unüberlegte Verschachtelung kann allerdings schnell gefährlich werden, denn ein weiterer Entwickler könnte den Gedanken missverstehen und den Code wie folgt erweitern:

.container2 {
font-size: 11px;
.wichtig {
@extend container.wichtig; // kopiert alle
// styles der Klasse wichtig
// innerhalb des Containers
}
}

Durch das extend-Konzept (später dazu mehr) wurden alle Eigenschaften der Klasse wichtig aus container in eine Klasse selben Namens in container2 kopiert.

Ganz klar handelt es sich dabei um ein interessantes Feature der Präprozessoren. In diesem Zusammenhang bringt es allerdings mehr Komplexität in den Code, als es eigentlich entfernen sollte, denn bei jeder zukünftigen wichtig-Klasse ist der Schritt nun zu wiederholen. Nur weil CSS-Präprozessoren die Möglichkeit einer Verschachtelung mitbringen, bedeutet das nicht, dass man sie unbedingt verwenden muss. Eine Verschachtelung bis zu maximal vier Ebenen kann sinnvoll sein, alles was darüber hinausgeht, bleibt nur in den seltensten Fällen praktikabel.

Zurück zum Ursprung, jetzt mit einfachem CSS-Code:

.container {
font-size: 12px;
}

.wichtig {
fonz-size: 14px;
color: red;
}

Die Klasse wichtig lässt sich nun in jedem Kontext verwenden und falls sie einmal abweichen sollte, kann der Programmierer immer noch eine zusätzliche Klasse erstellen. Das mag ein etwas weit hergeholtes Beispiel sein, aber es zeigt, dass ein CSS-Präprozessor keinen Entwickler daran hindern kann, aus nicht so schönem noch weniger schönen Code zu machen. Da diese "Bad Practice" nun bekannt ist, sind alle Voraussetzungen gegeben, um richtig mit CSS-Präprozessoren arbeiten zu können.

Ursprünglich wurden LESS und Sass in Ruby entwickelt. Mittlerweile ist LESS eine JavaScript-Bibliothek, was die Installation gerade unter Windows vereinfacht, denn Ruby ist – im Gegensatz zum Mac – unter Windows noch explizit zu installieren. Ist die Sprache im System vorhanden, lässt sich Sass über die Eingabeaufforderung beziehungsweise den Terminal einrichten.

LESS lässt sich zusätzlich in ein HTML-Dokument durch das Referenzieren einer JavaScript-Datei einbinden – für Produktivsysteme ist solch ein Vorgehen verständlicherweise allerdings nicht möglich.

Um Stylus installieren zu können, setzt das Programm Node.js voraus. Dementsprechend hat sich der junge Preprozessor als beliebter Konkurrent in der Node-Community etabliert. Das entsprechende npm-Modul (Node Package Manager) lässt sich mit einem einfachen Befehl installieren:

npm install stylus -g

Für LESS und Sass sind ebenfalls npm-Module für die Integration in Node.js-Anwendungen vorhanden.