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;
}

Dank SASS lässt sich CSS mit angemessenem Aufwand entwickeln.
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.

Abonniere jetzt t3n-News über WhatsApp und bleib mobil auf dem Laufenden!
t3n-News via WhatsApp!
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
Ein Rucksack voller nützlicher CSS-Schnipsel: Das CSS der Zukunft?
Ein Rucksack voller nützlicher CSS-Schnipsel: Das CSS der Zukunft?

Von den Machern von Simpla, einem Content-Management-System für Designer, kommt Rucksack – eine umfangreiche Sammlung aufgebohrter CSS-Features, die den Designprozess unterstützen und … » weiterlesen

Rank und schlank: PurifyCSS macht dein CSS fit
Rank und schlank: PurifyCSS macht dein CSS fit

PurifyCSS erkennt ungenutztes CSS und sorgt für satte Ersparnis bei der Zeichenanzahl. Damit bleibt das CSS sauber. » weiterlesen

Add-ins für Office programmieren: Microsoft veröffentlicht Entwickler-Tools
Add-ins für Office programmieren: Microsoft veröffentlicht Entwickler-Tools

Microsoft hat mit dem Open-Source-Projekt „Office UI Fabric“ eine Reihe praktischer Tools veröffentlicht, die Entwicklern das Programmieren von Add-ins für Office erleichtern sollen. » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?