Heute soll SASS vorgestellt werden. Was ist Sass? Bei Sass (Syntactically Awesome StyleSheets) handelt es sich um einen CSS Preprocessor. Also einem Tool, welches Sass Code zur weiteren Nutzung in CSS konvertiert. Das macht Sass natürlich nicht alleine. Es gibt da draußen noch eine Handvoll ähnliche Tools. Doch dazu später mehr. Nun erst mal zu der Frage: Warum überhaupt Sass nutzen?
CSS ist prima. Man kann inzwischen vieles Realisieren, wofür sonst Flash und Bilder eingesetzt wurden; Verläufe, Animationen, echte transparente Hintergründe usw. Doch auch CSS kann an seine Grenzen stoßen. Nicht nur in der Darstellung, sondern auch vor dem Aspekt modularer Programmierung. Haben wir ein großes Projekt mit entsprechend gewachsenen Stylesheets werden bestimmte Abschnitte häufiger wiederholt. Und bekanntlich sind Wiederholungen nicht gerade das wonach man streben sollte. Doch innerhalb von "gewöhnlichem" CSS kann man es häufiger nicht vermeiden, bspw. Farben zu wiederholen. Hier hilft uns Sass. Mittels Sass Variables können wir wiederkehrende Farben und andere Standardwerte einmal im Stylesheet definieren. Die Vorteile liegen auf der Hand:
Einmal deklariert, kann ich den Wert im ganzen Stylesheet verwenden und brauch ihn auch nur einmal verändern, wenn ich z. B. die Linkfarbe in einem Portal ändern möchte. Das Ganze kann so aussehen:
$link_farbe: #3bbfce;
.ein-link {
color: $link_farbe;
}Die Linkfarbe ist natürlich nur eine Anwendungsmöglichkeit. Das Prinzip kann auf viele weitere Zwecke erweitert werden; z. B. Standard-Schriftgrößen und feste Breiten. Doch Sass bietet noch viele weitere Features und Vorteile. Dazu in der nächsten Serie mehr. Bevor ihr mit Sass experimentieren könnt, muss noch klar sein, wie funktioniert Sass überhaupt und wie benutze ich es? Sass kann auf drei verschiedene Arten verwendet werden:
- Als command-line Tool,
- als Ruby Modul,
- oder als Plugin für Web Frameworks wie Ruby on Rails oder Merb
Als Kommandozeilen-Tool könnt ihr Sass wie folgt werden:
sass input.scss output.css
Änderungen an der scss-Datei können wie folgt überwacht werden:
sass --watch input.scss:output.css
Kurz zurück zu den anderen CSS Präprozessoren und was es für weitere Ansätze gibt: Eine viel beachtete Alternative zu Sass ist z. B. LESS. LESS kann nahezu alles, was Sass auch kann, setzt aber im Vergleich zu Sass auf eine Javascript-basierte Client-Lösung. Es muss also ein Script eingebunden werden, welches das Stylesheet beim User aufbereitet. Hier muss jeder für sich entscheiden, welche Lösung er bevorzugt.
so far