CSS3 leicht gemacht mit Sass und Compass

10. Januar 2012, von Sarah
Liechtenecker Büro

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 InstallCompass 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?

Sarah

Meine Rolle bei Liechtenecker: - Wenn es weder IT noch Digitalisierung gäbe, wäre mein Beruf: - Mein Herz schlägt für: -
14 Kommentare.
Kommentar verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
Andrea
16. März 2012 um 10:31

Ich persönlich finde Sass / Compass sehr gut. Seit kurzem besitze ich auch die Compass.app. Leider habe ich da ein kleines Problem: Das Sprite wird erstellt. Die Bilder werden sortiert nach der Dateigröße in dieses Sprite positioniert. Ich möchte aber das Sprite erstellen sortiert nach dem Namen. Über die Kommadozeile (compass watch) funktioniert das wunderbar. Hast du evtl. eine Idee, ob man das über eine Änderung in den Einstellung in der compass.app konfigurieren kann?

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
Andrea
16. März 2012 um 10:31

Ich persönlich finde Sass / Compass sehr gut. Seit kurzem besitze ich auch die Compass.app. Leider habe ich da ein kleines Problem: Das Sprite wird erstellt. Die Bilder werden sortiert nach der Dateigröße in dieses Sprite positioniert. Ich möchte aber das Sprite erstellen sortiert nach dem Namen. Über die Kommadozeile (compass watch) funktioniert das wunderbar. Hast du evtl. eine Idee, ob man das über eine Änderung in den Einstellung in der compass.app konfigurieren kann?

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
ph
26. Januar 2012 um 13:18

Was ist Deiner Meinung nach der Vorteil zu LESS — http://lesscss.org/ — oder Googles Closure Stylesheets — http://code.google.com/p/closure-stylesheets/ — ich bin über alle drei gestolpert, habe aber bis dato noch nicht geschafft mich näher damit zu beschäftigen.
Gruß
Christopher

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
    Sarah
    30. Januar 2012 um 12:59

    Hallo Christopher,
    Der größte Vorteil für mich ist, dass Sass mit Compass verwendet werden kann und somit alles noch einfacher und schneller geht. Bei Less gefällt mir dir die Syntax teilweise einfach nicht (Syntax Vergleich Sass/Less https://gist.github.com/674726 ).
    Google Closure Stylesheets habe ich mir auch noch nicht angesehen (werd ich aber noch, obwohl mich hier „Closure“ ein wenig abschreckt ;-)).
    Ich denke ich habe jetzt ein Thema für meinen nächsten Blog Beitrag, Dankeschön 🙂

    30. Januar 2012 um 19:56

    LESS wird – wenn ich es richtig verstanden habe – erst im Browser durch JavaScript zu normalem CSS gewandelt. Damit fällt es für mich flach. Das kann nicht der Sinn sein, dass CSS von JavaScript abhängig ist.

    1. Oktober 2012 um 15:04

    @Bert Jein, LESS.CSS kann im Browser zusammengebaut werden. Wird aber nur zu debugging Zwecken empfohlen. Es gibt viele LESS-Compiler die, die .less Files dann in richtiges CSS umwandeln wie bei SASS.
    z.B.:
    Mac CodeKit: http://incident57.com/codekit/
    Windows Simpless: http://wearekiss.com/simpless
    LESS.css ist auch sehr nützlich, wenn man Node.JS am Server verwendet. Damit kann es on-demand (und mit guter performance) generiert werden.
    Weiters gibt es derzeit auch ein neues Projekt Namens stylus: http://learnboost.github.com/stylus/

Der Herr No
12. Januar 2012 um 22:51

Sehr nicer Artikel, bin zufällig vor Weihnachten darüber gestoßen und bin auch schwerst begeistert, vor allem von der Logik der Mixins… Daumen hoch!

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
admin
10. Januar 2012 um 19:46

Finde SASS auch sehr zukunftsreich vorallem im Hinblick auf CSS3 (4:)

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
10. Januar 2012 um 19:18

Ich nutze SASS jetzt auch seit geraumer Zeit für mein Projekt http://www.questmate.de und bin voll überzeugt davon. Neben den genannten Features ist für mich vor allem der eingebaute CSS-Kompressor nützlich und die Möglichkeit, mehrere Dateien zu einer zusammenzufassen. Bei sehr umfangreichen Stylesheets wird es sonst irgendwann doch etwas unübersichtlich. Naja und einfach mehrere einbinden ist ja aus bekannten Gründen nicht wirklich drin.

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
Natalia und Marion reden über Usertests
UX/UI Design – Blogbeitrag

9 Fragen zum User Test – was Sie als Auftraggeber wissen sollten

18. September 2019, von Natalia

Euch steht ein User Test bevor? Die Agentur schreibt irgendwas von einem Usability Testing ins Angebot? Und ihr fragt euch jetzt, was das alles bedeutet? Dann lest hier die häufigsten Fragen und Antworten zum Thema User Testing.

Jetzt lesen
Susanne Liechtenecker und Christiane Bertolini
Inspiration – Podcasts

Folge #52 mit Christiane Bertolini

27. September 2019

Christiane Bertolini ist Betriebswirtschafterin und seit der Jahrtausendwende unternehmerisch tätig. Als Entwicklerin, Inkubatorin, hands-on Trendexpertin und Sparringspartner agiert sie cross industries, immer mit einem speziellen Twist.

Jetzt anhören
Close