CSS3 leicht gemacht mit Sass und Compass

Wahrscheinlich haben die meisten von euch Sass schon ausprobiert oder zumindest davon gehört.
Sass(Syntactically awesome Stylesheets) ermöglicht unter anderem die Verwendung von Variablen, Funktionen und sogenannten Mixins, was das schreiben von Styles einfacher und strukturierter macht. Das CSS Framework Compass, das mit Sass arbeitet ist auch ein sehr nützliches Tool, da uns hier viele Funktionen geboten werden, auch im Bereich CSS3.
Aber lasst uns einfach gleich starten:
Im ersten Teil dieses Artikels werden wir kurz einen Blick auf Sass werfen und im zweiten Teil schauen wir uns an, wie Compass uns bei CSS3 enorm helfen kann. Danach hoffe ich, dass viele von euch motiviert sein werden Sass und Compass auszuprobieren und vielleicht sogar in eurem nächsten Projekt zu verwenden.
Wie ihr Sass und Compass auf euren Rechner bekommt, lest ihr am besten auf der jeweiligen Webseite (Sass Install, Compass Install). Für die Windows User unter euch: ihr müsst wahrscheinlich noch Ruby installieren bevor ihr loslegen könnt, aber dies wird auf den eben genannten Seiten ebenfalls erwähnt.

Einblick in Sass

Nun möchte ich euch kurz ein paar Dinge vorstellen die man mit Sass tun kann und die meiner Meinung nach wirklich extrem nützlich sind (da es hier aber um CSS3 gehen soll wird dieser Einblick wirklich nur kurz)

Variablen

Mich hat es schon immer ein wenig gestört, dass es in CSS keine Variablen gibt, obwohl sie so nützlich sind! Hier zum Beispiel definiere ich eine Variable für eine Farbe und eine für eine Größe, die ich dann im gesamten Dokument nutzen kann:
Sass:
[sourcecode language=“css“]
$color: #CC6B32;
$size: 100px;
.box {
background-color: $color;
height: $size * 2;
width: $size;
}
[/sourcecode]
generiertes CSS:
[sourcecode language=“css“]
.box {
background-color: #CC6B32;
height: 200px;
width: 100px;
}
[/sourcecode]

Verschachtelungen

Verschachtelungen helfen vor allem das Dokument übersichtlich und strukturiert zu halten. Seht euch einfach folgenden Code-Schnipsel an und ihr werdet verstehen um was es geht:
Sass:
[sourcecode language=“css“]
p {
color: $color;
a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
[/sourcecode]
generiertes CSS:
[sourcecode language=“css“]
p {
color: #CC6B32;
}
p a {
text-decoration: none;
}
p a:hover {
text-decoration: underline;
}
[/sourcecode]
Wie ihr seht spart man sich durch die Verschachtelung ein wenig Schreibarbeit und die Element-Hierarchie wird sichtbar.

Mixins

Nun wird es noch um einiges interessanter, denn Mixins können auch wunderbar für CSS3 verwendet werden. Ein Mixin definiert eine Reihe von Styles die dann im gesamten Dokument, durch aufrufen des Mixins, wiederverwendet werden können – also ein wiederverwendbarer Code-Schnipsel:
Sass:
[sourcecode language=“css“]
@mixin rounded-corners($radius) {
border-radius: $radius;
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
/* … */
}
.box {
@include rounded-corners(5px);
}
.box2 {
@include rounded-corners(3px);
}
[/sourcecode]
generiertes CSS:
[sourcecode language=“css“]
.box {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
/* … */
}
.box2 {
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
/* … */
}
[/sourcecode]
Mit @mixin sagen wir, dass wir nun einen solchen Mixin definieren wollen, danach kommt der Name des Mixins, den wir uns natürlich selbst ausdenken. Für unser Element mit der Klasse box, rufen wir das Mixin durch @include mixin-name auf und geben in diesem Fall noch einen Radius mit.
Natürlich kann Sass noch einiges mehr, aber wir werden nun mit dem CSS Framework Compass weitermachen.

CSS Framework Compass

Compass arbeitet wie schon gesagt mit Sass und bietet unter anderem sehr viele vordefinierte Mixins an – eben auch für CSS3 (Compass – CSS3).
Um bei unserem vorherigen Beispiel mit border-radius zu bleiben – hier seht ihr wie das ganze mit Compass umgesetzt werden kann:
Compass/Sass:
[sourcecode language=“css“]
.box {
@include border-radius(3px, 3px);
}
[/sourcecode]
generiertes CSS:
[sourcecode language=“css“]
.box {
-webkit-border-radius: 3px 3px;
-moz-border-radius: 3px / 3px;
-o-border-radius: 3px / 3px;
-ms-border-radius: 3px / 3px;
-khtml-border-radius: 3px / 3px;
border-radius: 3px / 3px;
}
[/sourcecode]
Ich denke dieses Beispiel zeigt gut, wieviel Schreibarbeit man sich durch die Verwendung von Compass ersparen kann. Natürlich muss man dazu erst einmal die Namen der verschiedenen Mixins kennen, aber die Dokumentation/Reference von Compass ist ziemlich gut und ausführlich.
Hier noch ein kurzes Beispiel zu CSS3 box-shadow:
Compass/Sass:
[sourcecode language=“css“]
.box {
@include box-shadow(red 2px 2px 10px);
}
[/sourcecode]
generiertes CSS:
[sourcecode language=“css“]
.box {
-moz-box-shadow: red 2px 2px 10px;
-webkit-box-shadow: red 2px 2px 10px;
-o-box-shadow: red 2px 2px 10px;
box-shadow: red 2px 2px 10px;
}
[/sourcecode]
Ich könnte euch hier noch eine Reihe weiterer Beispiele zeigen, aber ich glaube ihr habt mittlerweile verstanden, warum ich so begeistert bin von Compass und Sass.
Noch ein sehr tolles Feature von Compass das ich euch nicht vorenthalten möchte: das automatische erstellen von Sprite-Images und dazugehörigem CSS Code (Referenz). Wer schon einmal CSS Sprites erstellt hat, weiß was für eine anstrengende und nervende Arbeit das sein kann. Als ich dann dieses Compass Feature ausprobiert habe, und das ganze auch auf Anhieb wunderbar funktioniert hat, war ich richtig in Jubelstimmung.

Fazit

Ich denke die Verwendung von Compass und Sass zahlt sich sehr aus, obwohl man natürlich eine gewisse Zeit benötigt bis man sich eingelernt hat. Für diejenigen, die schon Erfahrung mit Skript- oder Programmiersprachen haben, sollte das Einlernen kein Problem sein. Aber auch für die HTML/CSS Coder unter euch, glaube ich kaum, dass das Erlernen von Sass irgendwelche gröberen Schwierigkeiten bereiten sollte.
Durch die automatische Code-Generierung erspart man sich sehr viel Zeit. Auch, weil man sich in seinem Dokument viel besser und schneller zurechtfindet. Als Entwicklerin schätze ich vor allem die Verwendung von Mixins, Variablen, Verschachtelungen und so weiter, da das Dinge sind, die ich schon immer in CSS vermisst habe. Außerdem macht mir CSS schreiben wieder unheimlich viel Spaß, was selbstverständlich auch eine sehr bedeutende Rolle spielt.
Was haltet ihr von Sass bzw Compass? Habt ihr mit diesen Tools schon Erfahrungen gemacht, oder würdet ihr sie gerne ausprobieren?