Sass-Setup in 5 Minuten – ganz ohne Ruby-Installation

Der Ausblick: Vorteile von Sass

Partials

Im immer dichter werdenden CSS-Dschungel mit Media Querys und CSS-Frameworks kommen CSS-Präprozessoren genau richtig, um der vielen Styles strukturiert Herr zu werden. Das System: Styles werden bereichs- und komponentenbasiert gruppiert und in viele Einzeldateien, sog. Partials ausgelagert. Der Präprozessor läuft im Hintergrund und behält ein Auge auf das Verzeichnis, in dem diese Dateien abgelegt sind. Sobald sich eine von ihnen ändert, vereint die Software alle Partials zu einer großen CSS-Datei. Die ist nicht nur einfach in jedes CMS oder Blog-System zu integrieren, sondern verbessert gleichzeitig die Suchmaschinenfreundlichkeit und Ladezeit der Website. Denn eine einzelne, große Datei ist deutlich schneller übertragen als viele kleine.

Das Aufsplitten der Styles erleichtert das Editieren ungemein, wenn man einzelne Partials für z.B. Schriften, das HTML-Grundgerüst, die Standard-Selektoren und einzelne Komponenten vorsieht. Die Schriftgröße der H1 wird in der Datei _typography.sass vergrößert. Den Abstand zwischen Paragraph und Teaserbox verringern? Einfach die Datei _content.sass bearbeiten. Klarer Vorteil: Das Mausrad hat Pause, man muss sich nie wieder durch eine gigantische Styles-Datei quälen.

Aber ein Sass-Präprozessor kann noch mehr: Mit Variablen, Vererbung und Verschachtelung wird das Stylen bequemer, übersichtlicher und geht flotter von der Hand.

Verschachtelung

In einer flachen CSS-Datei mit untereinander gelisteten Styles tut man sich schwer, die komplexen Selektorenpfade übersichtlich abzubilden. Man endet mit Style-Wiederholungen und waghalsigen Selektorkonstrukten, die den Code unübersichtlich machen und in die Länge ziehen. Die Sass-Lösung: Mit Verschachtelungen, die man aus der Programmierung kennt, lässt sich der HTML-Objektbaum im Stylesheet quasi nachbauen.

ul {
 background-color: #ffffff;
 li {
 color:#000000;
 a {
 text-decoration: underline;
 }
 }
}

Variablen

Einmal definieren und in allen Styles verwenden: Besonders für Farben, Schriftgrößen und Elementabstände sind Variablen praktisch. Die blutrote Schmuckfarbe war dann doch nicht das Richtige? $spot-color ändern, Partial speichern, und der CSS-Präprozessor fügt sofort überall dort den neuen Farbwert ein, wo die Variable gesetzt wurde.

$background-color: #e2e2e2;
$text-color: #222222;

body {
 color: $text-color;
 background-color: $background-color;
}

Mixins

Mit Mixins schafft man kleine wiederverwendbare Style-Module, nicht unähnlich der Variablen. Praktisch ist das auch, um größere CSS-Konstrukte für häufige Verwendung zu verkürzen. Dazu stellt man einfach die Direktive @mixin vor den Style-Namen, und mithilfe des Befehls @include fügt der Präprozessor später den entsprechenden Code ein. Der Clou: Wie Programmierer das von Funktionen kennen, lassen sich Parameter übergeben, die innerhalb des Mixins an die Styles weitergereicht werden.

@mixin box-shadow($shadow) {
 box-shadow: $shadow;
 -moz-box-shadow: $shadow;
 -webkit-box-shadow: $shadow;
}

.shadow-box {
 border: 1px solid #000000;
 @include box-shadow(4px #303030);
}

Vererbung

Ebenfalls aus der Programmierung bekannt ist die Vererbung. Die Direktive @extend fügt dabei den nach ihr referenzierten in die aktuelle Definition. Danach können die aus der verwiesenen Definition übernommenen Styles munter überschrieben werden. Ein praktisches Beispiel sind Meldungen eines Website-Formulars; die Nachrichten sind grundsätzlich identisch formatiert, unterscheiden sich aber in der Farbgebung:

.general-message {
 background-color:b0b0b0;
 border: 1px solid #909090;
 color: #000000;
}

.error-message {
 @extend .general-message;
 border-color: #ff0000;
 color: #ff0000;
}

.success-message {
 @extend .general-message;
 border-color: #00ff00;
 color: #00ff00;
}

Die Struktur: Sass-Ordner im Website-Verzeichnis

Wer mit einem Apache, z.B. als Teil einer XAMPP-Installation arbeitet, verwaltet den Quellcode der Webseiten im /htdocs-Verzeichnis. Darin befinden sich meist Unterordner wie /javascript, /css, /apps, /static, etc. Es liegt als nahe, dort einen /sass-Ordner zu erstellen.

Tipp: Den /sass-Ordner später in die SVN-Ignore-Liste oder den FTP-Dateifilter hinzufügen, denn die Sass-Quellcodedateien werden auf dem Live-Server nicht benötigt.

Für das Gruppieren von Styles in einzelne Partial-Dateien gibt es keine Vorgaben. Um den Übersichtsvorteil zu nutzen empfiehlt sich eine komponenten- und bereichsspezifische Aufteilung. Wer Dateinamen wie _header.scss oder _sidebar.scss vor sich sieht, weiß sofort, welche Seitenelemente enthalten sind.

Hier ist eine Beispielstruktur für eine typische Website:

_variables.scss

_typography.scss

_scaffolding.scss

_header.scss

_navigation.scss

_breadcrumbs.scss

_content.scss

_sidebar.scss

_footer.scss

_forms.scss

_tables.scss

_media.scss

_print.scss

Wichtig ist, dass diese Haupt-Sass-Sammel-Datei nicht mit einem Unterstrich beginnt. Dann weiß der Sass-Präprozessor, dass er zu dieser SCSS-Datei eine passende style.css im Ausgabeverzeichnis erzeugen soll. Nun wird klar, warum Partials mit einem Unterstrich beginnen, denn diese Dateien ignoriert Sass bei der SCSS-zu-CSS-Konvertierung.

Hinweis: Es gibt keine Einschränkungen bei der Anzahl der zu erzeugenden CSS-Dateien. Wer also backendseitig die Druck- und die Tablet/Mobile-Version separat ausliefert, um Browser-Rendering-Zeit zu sparen, legt einfach eine print.scss und mobile.scss-Datei an und bindet die betreffenden Partials gezielt ein. Das obige Sass-Strukturierungsbeispiel eignet sich dann allerdings nicht mehr, da die Partial-Untergliederung jetzt auch auf die Endgeräte ausgerichtet werden muss.

Die Konfiguration: Ein- und Ausgabeverzeichnis in Scout

Scout ist mit wenigen Handgriffen konfiguriert. Das kleine Tool benötigt nur einen Projektordner, das Eingabeverzeichnis, in dem die SCSS-Dateien liegen und das Ausgabeverzeichnis, in das die große Gesamt-CSS-Datei geschrieben wird.

Los geht's!

Fazit

Es muss nicht immer PHPStorm oder Eclipse sein - die Lizenzen sind teuer und die Einrichtung der Entwicklungsumgebung mühsam. Um mit einem CSS-Präprozessor wie Sass zu arbeiten, steht normalerweise eine Ruby-Installation an, dann folgen die Sass-Gem-Erweiterung und schließlich die Integration in die IDE. Wer nur gelegentlich an Websites arbeitet, kommt aber mit primitiveren Tools, wie Scout zum Ziel. Damit genießt jeder die Vorteile von CSS-Präprozessoren, ohne vorab stundenlang konfigurieren zu müssen.