SASS und Compass Teil 1: SASS macht das Leben leichter
Mein Kollege Johannes stieß mich drauf, und ein paar Wochen später las ich überall davon. SASS und LESS sind CSS Preprocessors und der letzte Schrei des fortschrittsbewußten Frontend-Programmierers. Heißt nichts anderes, als daß man seine CSS Dateien nicht mehr direkt schreibt, sondern aus Basisdateien kompiliert.
Wie man SASS aufsetzt und das Kompilieren durchführt, erfahrt ihr in Teil 2 dieses Blogposts. Wer gleich loslegen und die unten beschriebenen Beispiele ausprobieren will, sollte die technische Seite vorweg klären.
Warum das denn? z.B. Nesting
Mühsam ernährt sich der CSS-Coder und schreibt reichlich Zeilen in sein Stylesheet. Wer nicht nur einmal, sondern viele Male Sachen wie
#content {
Styleanweisung 1;
Styleanweisung 2;
Styleanweisung 3;
}
#content .inner {
Styleanweisung 1;
Styleanweisung 2;
Styleanweisung 3;
}
#content .inner ul {
Styleanweisung 1;
Styleanweisung 2;
Styleanweisung 3;
}
- und noch fünfunddrölfzig Verschachtelungsebenen mehr - geschrieben hat, der weiß, was ich meine. Man hat sich insgeheim gefragt, ob das nicht etwas strukturierter geht.
Und warum sind Monstren wie
-moz-border-radius
-webkit-border-radius
-border-radius
notwendig. Nicht einmal, sondern bei jedem Border-Radius. Man wiederholt immer wieder die gleichen Text-Schnipsel, die man doch einmal irgendwo festlegen und dann wieder aufrufen könnte.
Es wäre so schön gewesen
Doch leider Pech gehabt. CSS hat quasi gar keine eingebaute Logik, mal abgesehen von dem Cascading, das dafür sorgt, welche Anweisung welche überschreibt. Nun lernt aber fast jeder Designer, der mit Content-Management-Systemen in Kontakt kommt, zumindest ein bisschen PHP. Und sei es nur, weil man den Programmierer für die Mini-Aufgabe nicht belatschern will. PHP mag nicht die großartigste aller Programmiersprachen sein, aber sie hat einen gewissen logischen Aufbau. Man schreibt eine Funktion einmal und verwendet sie an anderer Stelle wieder. So spart man sich redundanten Text, zudem kann man dann die Funktion an der Ursprungsstelle ändern, und er vererbt sich überall dahin, wo man sie wiederverwendet hat. Praktisch.
SASS to the rescue
Das hat wohl andere Designer / Frontend-Programmierer auch gestört. So sehr gestört, daß sie Lösungen entwickelt haben. SASS und LESS sind im Prinzip das gleiche: man schreibt eine Quell-Datei, in der die oben erwähnten Redundanzen nicht vorkommen. Stattdessen wird z.B. für Verschachtelungen der Logik gefolgt, die man auch im Html vorfindet. In SASS wäre das für das oberste Beispiel
#content {
Styleanweisung 1;
Styleanweisung 2;
Styleanweisung 3;
.inner {
Styleanweisung 1;
Styleanweisung 2;
Styleanweisung 3;
ul {
Styleanweisung 1;
Styleanweisung 2;
Styleanweisung 3;
}
}
}
Diese Datei nennt man style.scss, läßt den SASS-Preprocessor drüberlaufen, der aus dem SCSS-Quellcode wieder normales, "flaches" CSS erzeugt. Fertig.
Spitze des Eisbergs
Das oben gezeigte Nesting (Verschachteln) ist das einfachste aller Beispiele. Die Ersparnis in Codezeilen ist nicht so groß. Wobei das Nesting aber ganz enorm hilft, ist, die CSS Dateien besser zu strukturieren. Man sieht auf einen Blick, daß der ganze Anweisungsblock zum Div #content gehört. Wer sonst wie ich nach getanem Styling keine Energie mehr hat, das Stylesheet aufzuräumen, dem fällt es mit dieser strukturierten Schreibweise wesentlich leichter. Mal ganz davon abgesehen, daß das CSS auf diese Weise wesentlich mehr aussieht wie das Html, welches es stylt: auch im Html kommt erst das <div id="content"> und darin befindet sich wiederum <div class="inner"> usw.
<div id="content>
<div class="inner">
<ul>
</ul>
</div>
</div>
Farben organisieren
SASS kennt auch Variablen. Das kann man sich sehr effektiv beim Organisieren von Farbwerten zunutze machen.
Statt
body {
color: #333;
}
#footer {
border: 1px solid #333;
}
schreiben wir in der .scss-Datei:
/*** Colors ***/
$body-font-color: #333;
body {
color: $body-font-color;
}
#footer {
border: 1px solid $body-font-color;
}
Die Vorteile sind offensichtlich: Wir haben am Anfang unserer CSS-Datei eine Übersicht über alle Farben. Vor allem, wenn wir eine der Farben, wie in diesem Fall das dunkelgrau #333 ändern wollen, schlägt die Variable voll zu. Wir ändern nur die Definition für $body-font-color und alle Stellen, an denen die Farbe verwendet wird, passen sich mit an.
Hurra, Farbabstufungen
Wer mit Indesign arbeitet, hat sich schon mehr als einmal gewünscht, im CSS etwas ähnliches wie die Farbfelder zur Verfügung zu haben, die nur eine Abstufung einer anderen Farbe sind. Ich definiere ein bestimmtes Blau, und für ein anderes Element 50% dieses Blaus. Bis jetzt immer ein Hit- und Miss-Prozess im Color-Picker von Firefox, oder aber man benutzt tatsächlich ein Tool wie Indesign, um RGB-Farben zu berechnen. Ack.
Kein Problem für SASS. Es gibt dazu die Funktionen lighten und darken.
lighten (#000, 50%) ergibt die mathematisch korrekte Mitte zwischen Schwarz und weiß: #808080 bzw gray, was das gleiche bedeutet. Man hat also tatsächlich 50% grau.
Beim Umgang mit Farben, die nicht grau sind, sind die Prozentwerte etwas anders, sie halbieren sich etwa. Um also 50% von knallrot #ff0000 zu bekommen, muß ich schreiben lighten(#ff0000, 25%). Ich erhalte #ff8080. darken funktioniert genau anders herum: schreibe ich darken(#ff8080, 25%), erhalte ich #ff0000.
Dies sind mathematisch korrekt berechnete Werte. Wenn ich Colorzilla glauben schenke, sind es etwa 25.2%, um genau die Mitte im Farbwürfel zu erreichen. Um herauszufinden, ob Colorzilla falsch darstellt oder nicht, müßte ich mich mit Farbtheorie befassen.
Mehr davon
Weitere Themen wie Mixins und Benutzung der Compass Komponenten folgen in einer Fortsetzung dieses Blogposts