CSS Preprocessors – Eine schöne neue Welt

Mit dem Start der Entwicklung von CSS3 (Cascading Style Sheets Level 3) Mitte 2000 wurde ein weiterer Grundstein für die Umsetzung moderner Webseiten gelegt.
Auch wenn die Unterstützung von CSS3 selbst in heute aktuellen Browsern noch nicht vollständig ist, nutzen immer mehr Webseiten die neuen Möglichkeiten.

Um die größer gewordene Komplexität in der Entwicklung zu kompensieren, entstanden sogenannte CSS Preprocessors.
Mit ihrer Hilfe können Programmierer zahlreiche Hilfsmittel bei Erstellen von CSS Anweisungen nutzen. Hierzu zählen z.B.

Variablen (zur Wiederverwendung bzw. Definition von Farben, Werten, etc.)

$blue: #3bbfce;
$margin: 16px;

Mixins (Funktionen mit denen CSS Stücke an mehreren Stellen genutzt werden können. Argumente können übergeben werden)

@mixin left($dist) {
  float: left;
  margin-left: $dist;
}

Verschachtelung (automatische Definition von verschachtelten Regeln)

table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}

Operationen (z.B. zum Aufhellen von Farben, berechnen von Breiten, etc.)

$navbar-width: 800px;
width: $navbar-width/$items - 10px;

Aktuell haben sich zwei System durchgesetzt. LESS und Sass.

Da beide System relativ ähnlich zueinander sind ist die Entscheidung welches genutzt werden soll eher eine Glaubensfrage.
Einer der wichtigsten Unterschiede ist, dass LESS in Javascript geschrieben ist und als Standard auf Seite des Clienten (also Browsers) kompiliert wird.
Im Unterschied dazu wird Sass üblicherweise auf Server-Seite kompiliert und als normale CSS Datei an den Browser ausgeliefert.

Beide Sprachen sind wertvolle Hilfsmittel bei der Entwicklung größerer Webprojekten und ermöglichen den Programmieren ihre Stylesheet Dateien besser zu strukturieren.
Zudem erleichtert sie das Zusammenarbeiten mehrerer Entwickler an einem Projekt.