CSS-Preprocessors revolutionieren die CSS-Entwicklung

  • Ein CSS Preprocessor interpretiert Code (in einer eigenen Syntax) und generiert daraus gültigen CSS-Code. Die gängisten Preprocessors derzeit sind SASS, LESS und Stylus. Die Syntax der unterschiedlichen Lösungen ist eng an die native CSS Syntax angelehnt, der Entwicklungsprozess ist jedoch eher ein programmatischer. Die Preprocessors bringen für den Entwickler wesentliche Erleichterungen wie z.B.:
  • – Verwendung von Variablen
  • – Verwendung von Funktionen
  • – Verschachtelung
  • – Dynamische Berechnungen

Der Code wird bei SASS in einer “.scss” Datei geschrieben, der Preprocessor generiert daraus ein valides CSS – Dokument. Der Preprocessor kann dabei wahlweise die CSS – Dateien direkt via Javascript “on-the-fly” generieren (aus Performance-Gründen nicht zu empfehlen) oder aber die kompilierten CSS-Anweisungen statisch in eine Datei schreiben, welche dann im HTML-Dokument wie gewohnt eingebunden wird.

Ein einfaches Beispiel mit SASS (SCSS-Syntax):

—————- style.scss ——————

/* comment: define variables */
$mainColor = #333;
$defaultSpacing = 10px;
.news {
 
    /* use variables */
    margin-bottom: $defaultSpacing;
    background-color: $mainColor;
 
    /* nesting */
    h1 {
        /* do SASS dynamic calculation */
        padding: $defaultSpacing/2;
    }
}

Der Preprocessor erzeugt aus obigem Code folgende CSS – Anweisungen:

—————- style_compiled.css ——————

.news {
  margin-bottom:10px;  background-color: #333;
}
.news h1 {
  padding: 5px;
}

Man sieht bereits an diesem einfachen Beispiel, dass der Code wesentlich strukturierter, übersichtlicher und logischer wird. Da auch Dinge wie Funktionen (sogenannte “Mixins”) und Kalkulationen möglich sind, erspart sich der Entwickler auch jede Menge Schreibarbeit und der Code wird auch leichter wartbar.

Mixins
Mixins sind im wesentlichen Blöcke von CSS – Definitionen, welche im gesamten CSS durch Aufruf verwendet werden können (ähnlich einer Funktion) – somit ist die Wiederverwendbarkeit von Anweisungen sehr einfach und zentral wartbar.

Mixins – Ein einfaches Beispiel

—————- style.scss ——————

@mixin roundedBox($radius) {
  border-radius: $radius;
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
}
.maxRoundedBox {
 @include roundedBox(10px);
}
.semiRoundedBox {
  @include roundedBox(5px);
}

Der Preprocessor erzeugt daraus folgenden CSS – Code

—————- style_compiled.css ——————

.maxRoundedBox {
   border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}
.semiRoundedBox {
   border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

COMPASS
Wir verwenden in unseren Projekten SASS in Verbindung mit der Bibliothek COMPASS, welche zahlreiche nützlich Erweiterungen und vordefinierte Mixins bietet wie bspw. die automatische Generierung von Sprites, Einbindung von Grid-Layouts etc. So existiert bspw. für “Border-Radius” ein vordefiniertes Mixin, welches wie folgt in COMPASS aufgerufen wird:

—————- style.scss ——————

.maxRoundedBox {
  @include border-radius(10px, 10px);
}

—————- style_compiled.css ——————

.maxRoundedBox {
   -webkit-border-radius: 10px 10px;
   -moz-border-radius: 10px / 10px;
   -khtml-border-radius: 10px / 10px;
   border-radius: 10px / 10px; 
}

Es wird anhand dieser einfachen Beispiele deutlich, wieviel Schreibarbeit sich der Entwickler sparen kann und das Framework auch zusätzlich dafür sorgt, dass Cross-browser-fähiger CSS-Code generiert wird. Neben zahlreichen Mixins unterstützt COMPASS auch die automatische Generierung von Sprites aus einzelnen Bildern, was sich sehr positiv auf die Performance von Websites auswirkt. Mehr dazu findet sich im Tutorial “Spriting with COMPASS”.

An dieser Stelle möchten wir auch nicht weiter in die Tiefe gehen – es sei jedem, der mit der Materie zu tun hat, empfohlen, sich CSS Preprocessors mal näher anzuschauen (falls dies nicht schon längst passiert ist). Uns hilft es in der täglichen Entwicklung massiv und führt letzendlich zu stabilem und qualitativ hochwertigem Code, der einfach zu managen ist. SASS ist für jeden Entwickler, der mit den Grundlagen von CSS vertraut ist schnell erlernbar.

Weiterführende Links:
SASS – Tutorial, Dokumentation, Installation
Compass CSS Authoring Framework

Leave a Reply