SASS und Compass im Alltag

Es ist ja in letzter Zeit bereits einiges über CSS-Präprozessoren wie SASS und Compass geschrieben worden 1, daher möchte ich statt der „großen Themen“ ein paar Dinge aufführen, die die alltägliche Arbeit mit Stylesheets erleichtern.

Helfer im Alltag

Variablen/Berechnungen

Ein interessanter Vorteil ist die Möglichkeit, Variablen zu definieren und damit sogar zu rechnen. Ein direkter Nutzen zeigt sich bei einem Beispiel, dass man so oder ähnlich öfters in CSS-Dateien finden kann:

.box h3 {
    margin: -18px -15px 0;
    …
}

Hmm. Woher kommen die Werte -18 und -15? Und warum wurden genau diese Werte gewählt? Schaut man sich das gesamte Beispiel an, wird es mit SASS auf den ersten Blick verständlicher:

$box-hpad: 15px;
$box-vpad: 18px;

.box {
    padding: $box-vpad $box-hpad;
    border: 1px solid #ccc;
}

.box h3 {
    padding: $box-vpad $box-hpad;
    margin: (-$box-vpad) (-$box-hpad) 0;
    background-color: #ccc;
}

Ändern sich hier im Layout die Abstände, muss dies nur noch an einer Stelle geschehen. Zugleich ist dokumentiert, was die einzelnen Pixelwerte bedeuten und man verhindert, einen Wert bei einer Änderung zu vergessen. Das hilft besonders, wenn mehrere Entwickler am Frontend arbeiten.

Don‘t repeat yourself

Viele Standard-Codesnippets, die man in fast jedem Projekt benötigt, sind in Compass bereits enthalten, das Zusammensuchen von Code entfällt also: Clearfix-Methode, diverse CSS-Reset-Einstellungen (basierend auf Eric Meyer‘s Reset 2.0), CSS3-Buttons, etc.

Wer genauer wissen will, was es mit den einzelnen Snippets auf sich hat, kann sich auf der Compass-Website jeden Sourcecode einzeln ansehen. Und das Beste: Sollte es für diese Mixins im Laufe der Zeit Updates geben (z.B. der Wegfall von Vendor-Prefixen), braucht man lediglich einmal Compass selbst zu aktualisieren und seine Stylesheets neu zu erzeugen.

Darüber hinaus gibt es auch weitere Mixins, z.B. zum automatischen Erstellen von CSS-Sprites, die einem die Arbeit erleichtern. Ebenso kann man eigene Module als Compass-Erweiterungen zusammenstellen.

Deployment

Einige nützliche Funktionen drehen sich um die Ausgabe der CSS-Dateien, die sich auch dann anbieten, selbst wenn man sonst kein einziges Feature von SASS nutzen würde:

Strukturelle Validierung

Beim Parsen der SASS-Datei wird der Code strukturell validiert. Sollten also eine Klammer oder ein Semikolon fehlen, wird eine Fehlermeldung im Browser angezeigt. Auf die verwendeten Eigenschaften hat es keine Auswirkungen, Vendor-Prefixes oder Browser-Hacks sind also weiterhin möglich.

Codestrukturierung und Wiederverwendbarkeit

Endlich ist @import nicht mehr „böse“. Bisher verhinderte diese Regel das parallele Herunterladen von CSS-Dateien und konnte so zu einer Verlangsamung des Seitenaufbaus führen. In SASS werden die importierten Dateien direkt in die Gesamtausgabe eingebettet. Man kann also seine Styles hervorragend modular aufbauen und für Wiederverwendbarkeit kapseln.

Kommentare

Kommentare, die mit // … statt dem üblichen /* … */ eingesetzt werden, erscheinen nicht im ausgegebenen CSS. Man kann diese Möglichkeit also hervorragend nutzen, seinen Code zu kommentieren, ohne dass diese Anmerkungen nachher auf dem Produktivsystem zu sehen sind. Das ist besonders auch für Arbeiten im Team nützlich.

Minifizierung des Codes

Last but not least, kann mit einer Option die Ausgabe des Codes direkt minimiert erfolgen, also ideal für Produktivumgebungen.

Sicher kann man diese Möglichkeiten auch ohne den Einsatz eines Präprozessors nutzen, allerdings erfordert dies für gewöhnlich entweder einen eigenen Build-Prozess oder man ist auf die manuelle Nutzung von Online-Tools angewiesen. Als „Dreingabe“ also auf jeden Fall schon interessant.

Fazit

Man sollte sich – wie bei allen neuen Techniken – anschauen, was SASS und Compass zu bieten hat und danach gezielt entscheiden, was für den eigenen Arbeitsworkflow sinnvoll ist.

Mit SASS kann man genauso übersichtliche oder unübersichtliche Stylesheets produzieren, wie man es auch mit CSS alleine machen kann, man muss also trotzdem die Regeln kennen. Dann können aber gerade die kleinen Handreichungen eine echte Erleichterung im alltäglichen Arbeiten sein.


  1. ↩