Vorheriger Artikel Nächster Artikel

CSS-Entwicklung: SASS im Einsatz

Aus dem
t3n Magazin Nr. 27

03/2012 - 05/2012

Vorkompiliertes ist in aller Munde, und immer weniger Frontend-Entwickler verweigern sich dem Thema. Wo man hinschaut, sieht man die gleichen Einleitungen zu dem Thema. Es werden Variablen vorgestellt sowie Vererbung erklärt. Und dann? t3n zeigt praktische Anwendungsfälle.

CSS-Entwicklung: SASS im Einsatz

Welche Türen stehen mit vorkompilierten Stylesheets offen? Wie lassen sich Variablen und Vererbung nützlich in eigene Projekte integrieren? Und womit reizt man SASS aus? Nach der Einführung [1] in die Grundfunktionen von SASS [2] kommen nun also Erweiterungen, Mixins und Compass zum Einsatz.

Erweiterungen

Wie oft kommt es vor, dass verschiedene Elemente auf einer Seite sich zwar ähneln, nicht aber gleichen? Buttons zum Beispiel, oder Hinweisboxen. Letztere sind auch Ausgangspunkt des folgenden Beispiels: Neben allgemeinen Hinweisboxen soll es auch eine Variante für Fehlermeldungen geben.

Separate Fehler- und Erfolgsmeldungen

.message {
 background-color: lighten($main-color, 30%);
 border: 0.1em solid $main-color;
 padding: 1em;
 margin: 1em 0;
   p:last-child {
  margin-bottom: 0;
 }
}
.error {
  @extend .message;
 background-color: lighten($error-color, 30%);
 border-color: $error-color;
}

Der erzeugte CSS-Code erhält nun keine Mehrfach-Deklarationen, sondern erweitert dank dem „@extend“-Element die entsprechenden Selektoren und lagert nur die Ergänzungen aus.

Erzeugter CSS-Code

.message, .error {
 background-color: #42ff62;
 border: 0.1em solid #00a81c;
 padding: 1em;
 margin: 1em 0;
}
.message p:last-child, .error p:last-child {
 margin-bottom: 0;
}
.error {
 background-color: #ff9999;
 border-color: red;
}

dms 72da315487c044f3c13c6d46f6ee3232
Dank SASS lässt sich mit angemessenem Aufwand entwickeln.

Generell lässt sich dies auch im HTML-Code erreichen, indem die Fehlerboxen einfach mit den Klassen „message“ und „error“ ausgezeichnet sind. Das funktioniert in einem so einfachen Beispiel ziemlich ähnlich, in größeren Projekten kann es aber von Vorteil sein, den HTML-Code unberührt zu lassen. Zudem erleichtert die zentralisierte Formatierung im CSS-Code die Wartung.

Erweiterungen mit Mixins erweitern

Mixins sind im Grunde Code-Blöcke, die man in der SASS-Datei an beliebiger Stelle aufruft. Ihr Inhalt wird dann an dieser Stelle in die CSS-Datei geschrieben. Der Clou ist aber die Tatsache, dass ein Mixin, ähnlich einer Funktion in echten Programmiersprachen, mit übergebenen Variablen umgehen kann, die dann in diesem Mixin zur Verfügung stehen.

Mixins definieren

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

Dass dieses Mixin Tipparbeit erspart, ist offensichtlich: Die Vendor-Prefixe für eine CSS-Eigenschaft, in diesem Fall den Schatten, sind einmal definert und müssen nicht bei jedem Aufkommen erneut getippt werden. Entsprechend kommt das Mixin fortan in Stylesheets zum Einsatz. Das funktioniert über „@include“ und den Namen des Mixins.

Mixins einbinden

.box {
 @include box-shadow(0.1em 0.1em 0 rgba(0, 0, 0, 0.4));
}
.another-box {
  @include box-shadow(inset 0 0.2em 0.2em -0.15em rgba(0, 0, 0, 0.3));
}

Das Mixin generiert nun automatisch die entsprechenden Vendor-Prefixe. Soll später ein neuer Browser hinzukommen oder ändern sich die Prefixe, reicht ein Ändern des Mixins und das Generieren einer neuen CSS-Datei. Alle Vorkomnisse sind dann angepasst.

1 3 4
Vorheriger Artikel Zurück zur Startseite Nächster Artikel
Keine Antwort
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Aktuelles aus dem Bereich CSS
t3n-Blogperlen: Die 10 besten deutschsprachigen Blogs für Entwickler
t3n-Blogperlen: Die 10 besten deutschsprachigen Blogs für Entwickler

In der neuen Rubrik „t3n-Blogperlen“ beschäftigen wir uns heute mit zehn lesenswerten deutschsprachigen Blogs für Webworker und Entwickler. Wählt euren Favoriten! » weiterlesen

Die 10 beliebtesten Artikel der Woche: Googles neue Design-Sprache, Fluchende Entwickler, Blogperlen für Startups und YO!
Die 10 beliebtesten Artikel der Woche: Googles neue Design-Sprache, Fluchende Entwickler, Blogperlen für Startups und YO!

Die vergangene Woche hatte es in sich. Zehn Themen auf t3n bewegten euch besonders – darunter unter anderem zehn Dinge aus den 90ern, die im Büro ausgedient haben, die besten Ressourcen für den … » weiterlesen

CodePen stellt schlankes Blog-System für Entwickler zur Verfügung
CodePen stellt schlankes Blog-System für Entwickler zur Verfügung

Vielen von euch wird CodePen als Plattform für HTML/CSS/JS-Demos ein Begriff sein. Seit neustem könnt ihr hier aber nicht nur eure Ideen und Lösungen präsentieren, sondern auch gleich noch mit … » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n-Newsletter t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen