Sobald eine Webseite umfangreich und deren Inhalt komplex wird, wird das CSS umständlich, unübersichtlich und der nötige Arbeitsaufwand steigt enorm. Die Formatierungen wiederholen sich häufig, sodass Erweiterungen und Änderungen der CSS-Dateien aufwändig werden und viel Zeit erfordern. Kurz gesagt, man überlegt sich, wie man CSS strukturieren, übersichtlich gestalten, in Module unterteilen und auch wiederverwendbar machen kann.

Ein möglicher Lösungsansatz sind so genannte Präprozessoren. Diese haben eine CSS-ähnliche Syntax und erleichtern Entwicklern das Arbeiten mit CSS-Dateien. Allerdings kann der Browser diese alternative Syntax nicht interpretieren. Es ist deshalb ein Compiler nötig, der die Dateien während oder nach der Entwicklung in „normales“, optimiertes und fehlerfreies CSS umwandelt.

Sass (Syntactically Awesome Stylesheet) ist einer dieser Präprozessoren und eine Meta-Sprache, mit der CSS-Code strukturiert und flexibel geschrieben, ja fast schon programmiert werden kann. So gibt es beispielsweise Variablen, Schleifen, dynamische Berechnungen von Werten und sogar Funktionen [1].

Mit Sass werden SCSS-Dateien erstellt. Die SCSS-Syntax baut auf CSS auf. Das bedeutet, jedes valide CSS kann direkt ohne Anpassungen in eine SCSS-Datei übernommen werden; diese hat die Endung .scss. Innerhalb dieser Dateien lassen sich nun zahlreiche Sprach-Konstrukte anwenden, die dann der Präprozessor in valides CSS umwandelt.

Entwickler können grundsätzliche Vorgaben, wie zum Beispiel Farben, Pixelwerte oder auch
Schriftarten, an zentraler Stelle in Variablen definieren und dann
im weiteren Code verwenden. Somit lässt sich etwa ein
Standard-Padding-Wert definieren, der in weiterer Folge einerseits
schlicht verwendet, andererseits aber auch für Berechnungen herangezogen
werden kann.

$darkGrey: #A0A0A0;
$boxPadding: 10px;
$font: Helvetica, Arial, sans-serif;

body { 
 color: $darkGrey; 
 font-family: $font; 
}

.box { 
 padding: $boxPadding; 
}

.container {
 width: $pageWidth - $boxPadding * 2;
}

Sass erlaubt darüber hinaus das Verschachteln von CSS-Regeln. Dies verbessert die Übersicht im Stylesheet, da sich zusammengehörige Styles innerhalb eines Blocks darstellen lassen.

.header {
 width: 100%;
 .logo {
  width: 150px;
  background-color: red;
 }
}

Eine der mächtigsten Fähigkeiten von Sass sind so genannte Mixins. Damit können Webentwickler CSS-Code quasi programmieren: Man deklariert einen Mixin (vergleichbar mit einer Funktion), welcher sich optional auch mit Argumenten versehen lässt und ruft diesen dann per @include in der Style-Zuweisung eines anderen Elements auf. Dieses Element erhält dann zusätzlich die im Mixin angegebenen Styles; die Mixin-Styles werden also sozusagen „hineingemischt“ – daher die Bezeichnung.

@mixin addBorder($width, $color) {
 border: $width $color solid; 
}

.footer {
 @include addBorder(2px, $darkGrey);
 // andere Style-Zuweisungen...
}

Schließlich lassen sich, im Sinne einer besseren Übersichtlichkeit oder einfach nur der Modularität und Wiederverwendbarkeit wegen, einzelne SCSS-Dateien auslagern und nur bei Bedarf importieren. Wichtig ist dabei im Grunde nur, dass zwar die Dateinamen mit einem Unterstrich beginnen, der Name in der Import-Anweisung den Unterstrich aber nicht mitführt. Der Unterstrich dient lediglich dazu, den Sass-Compiler anzuweisen, diese Datei zu ignorieren und nicht automatisch in eine CSS-Datei umzuwandeln.

@import "modules/textstyles";

Compass ist ein CSS3-Framework, welches auf Sass aufsetzt und eine
Menge Werkzeuge, Bibliotheken und nützliche Kleinigkeiten an Bord hat.
Darunter befinden sich etwa Grid-Systeme, Typographie-Helfer, Browser-übergreifende
CSS3-Funktionen, Reset-Styles, automatische Generierung von CSS-Sprites
oder sogar UI-Elemente wie etwa Tabs [2].

Im Folgenden soll nun auf Basis von Sass und Compass eine Demoseite [3] mit zwölfspaltigem
Layoutraster, Kopfbereich mit Logo, Inhalt mit linker Spalte und Hauptinhalt sowie einem Footer mit drei nebeneinander
platzierten Boxen entstehen. Doch bevor es an die Entwicklung der Site geht, gilt es zunächst, die Arbeitsumgebung vorzubereiten.

Unter Windows muss zunächst Ruby installiert werden; wichtig dabei ist, dass die Option „Add Ruby executables to your PATH“ aktiviert ist, damit andere Installationen Ruby später finden können. Nach der Installation lässt sich das auf der Kommandozeile (cmd) sehr einfach mit dem Befehl „gem -v“ überprüfen. Wird als Antwort darauf keine Versionsnummer gezeigt, so ist der Pfad falsch gesetzt und es muss manuell nachjustiert werden. Das passiert unter Computer > Eigenschaften > Erweiterte Einstellungen > Umgebungsvariablen > Systemvariablen. Der Pfad zum bin/-Verzeichnis im Ruby-Installationsordner muss hier hinzugefügt werden. Mit funktionierendem Ruby lässt sich die Arbeitsumgebung jetzt sehr einfach abschließen: „gem install sass“ installiert zunächst Sass, „gem install compass“ im Anschluss daran Compass.

Ruby ist auf dem Mac bereits installiert, sodass Sass und Compass direkt installiert werden können. Im Terminal erledigen das die Befehle „sudo gem install sass“ und „sudo gem install sass“.

Das 960 Grid System [4] ist eine einfache CSS-Bibliothek, die Spalten-Layouts unterstützt und die Entwicklung wesentlich vereinfacht. 960gs hat sich mittlerweile aufgrund seiner einfachen und kompakten Handhabung als Quasi-Standard für Layoutraster etabliert – im Folgenden wird es deshalb ebenfalls als Grundlage genutzt.

Die Installation ist auch hier denkbar einfach. Auf der Kommandozeile beziehungsweise im Terminal reicht dafür schlicht der Befehl „gem install compass-960-plugin“.

Im nächsten Schritt wird mit Compass die Projektstruktur erstellt und Compass angewiesen, diese zu überwachen. Das bedeutet, dass SCSS-Dateien automatisch zu CSS-Dateien kompiliert werden, quasi „on the fly“. Die Befehle werden erneut auf der Kommandozeile ausgeführt und inkludieren auch die Anweisung, 960gs zu verwenden. Compass erstellt dann das Verzeichnis „my_project“ und überwacht dieses.

compass create -r ninesixty path/to/my_project --using 960
compass watch path/to/my_project

Kurz erwähnt sei an dieser Stelle die Konfigurationsdatei config.rb. Sie enthält den Projektpfad und einige andere Konfigurationsoptionen. So lässt sich dort beispielsweise festgelegen, dass CSS-Code in minimierter Form erstellt werden soll.

Die automatisch erstellten Dateien text.scss und text.css benötigen wir für das Demoprojekt nicht und löschen sie deshalb. Stattdessen legen wir eine Datei im sass/-Verzeichnis mit dem Namen „_base.scss“ für unsere grundlegenden Style-Deklarationen an. Zur Erinnerung: Der Unterstrich am Anfang des Dateinamens weist Sass an, hier nicht aktiv zu werden und die Datei entsprechend nicht in CSS umzuwandeln.

$baseLineHeight: 20px;
$textColor: #444444;
$baseFontFamily: Arial, Helvetica, sans-serif;

body {
 font-family: $baseFontFamily;
 line-height: $baseLineHeight;
 color: $textColor;
}

Die Datei grid.scss enthält unsere Hauptarbeit. Im Folgenden einige beispielhafte Auszüge, welche demonstrieren, wie einfach sich Spalten-basierte Layouts unter Einsatz des Compass-960-Grid-Systems realisieren lassen.

/* Import der benötigten Compass-Module und der _base.scss */
@import "960/grid";
@import "compass/css3";
@import "compass/utilities";
@import "base";

/* Header mit Logo und Navigation */
.header {
 // Wendet das Grid System auf das Element an:
 @include grid-container;  

 .logo {
 // Weist dem .logo-Element im Header eine 2-spaltige Breite zu:
  @include grid(2);
 }

 .navigation {
  // Das Element soll sich über zehn Spalten erstrecken:
  @include grid(10);
 
  ul {
   // Horizontales Listen-Layout:
   @include horizontal-list-container; 
 
   li {
    @include horizontal-list-item;
   }
  }
 }
}


/* Haupt-Inhaltsbereich */
.container {
 // Wendet das Grid System auf das Element an:
 @include grid-container;

 .sidebar {
  // Das Element soll sich über vier Spalten erstrecken:
  @include grid(4);
 }
  
 .content {
  // Das Element soll sich über acht Spalten erstrecken:
  @include grid(8);
 }
}

/* Footer */
.footer {
 // Wendet das Grid System auf das Element an:
 @include grid-container;
  
 .box {
  // Das Element soll sich über vier Spalten erstrecken:
  @include grid(4);
 }
}

Sass und Compass nehmen dem Entwickler zwar nicht die komplette Arbeit ab, sind jedoch durchaus eine große Hilfe im Bereich der Frontend-Entwicklung. Neben der Zeitersparnis können Webentwickler so den Code ihrer Websites übersichtlich gestalten und auf ständig weiterentwickelte Bibliotheken zurückgreifen.

Aufgrund der Tatsache, dass valides CSS direkt in SCSS-Dateien übernommen werden kann, lohnt sich entsprechend der Umstieg bereits bestehender Projekte. Und auch für den Einsatz in kleineren oder statischen Websites ist der Einsatz bereits lohnenswert, zumal es schon eine Erleichterung sein kann, einen Farbcode nur einmal und nicht zweimal zu ändern.

Der Autor

Emrullah Demir realisiert seit vielen Jahren als Webentwickler bei der S2 INTERMEDIA GmbH zahlreiche Internetprojekte. In diesem Umfeld beschäftigt er sich umfassend mit dem Thema der Frontend-Entwicklung und verfolgt aufmerksam Neuerungen auf dem Markt.