CSS variabel machen

SCSS (Sassy CSS) oder Sass (Syntactically Awesome Stylesheet) ist eine Sprache, die auf CSS aufsetzt und versucht es dynamisch zu machen und bessere Syntax zu verwenden. Dabei gibt es noch eine Unterscheidung zwischen SCSS und Sass – jedes gültige CSS-Dokument ist auch ein gültiges SCSS-Dokument, Sass hingegen verwendet eine veränderte Syntax, vor allem fallen die geschweiften Klammern und das Semikolon weg. Die Hierarchie innerhalb des Dokuments wird durch strikte Einrückung und Zeilenumbrüche gewahrt. Doch fangen wir vorne an.

Installation

Um SCSS nutzen zu können bedarf es nicht viel. Auf der Website gibt es eine einfache Anleitung. Auf meinem Mac im Buero war die Installation in fünf Minuten erledigt. Da das ganze auf Ruby basiert muss man unter Windows und Linux erstmal noch Ruby installieren, aber auch das sollte machbar sein.
Von nun an schreibt man seine Stylesheets als SCSS-Dateien (*.scss) und verwendet darin die neue Syntax. Mittels des Befehls

sass --watch style.scss:style.css

kann man nun die neue SCSS-Datei überwachen lassen und sobald man an dieser eine Änderung gespeichert hat, wird daraus eine in jedem Browser verwend- und lesbare, normale CSS-Datei generiert. Man kann diese Generierung auch beeinflussen mit einigen Parametern, sodass man als Ausgabe-CSS-Datei eine minifizierte, ladeoptimierte Datei ausgibt, die von allen Leerzeichen und Zeilenumbrüchen befreit ist.

SCSS anwenden

Was kann man nun mit SCSS anfangen? Ein paar konkrete Beispiele dürften am besten Abhilfe schaffen. Wie der Titel dieses Eintrags schon verrät sind Variablen möglich. Besonders interessant dürfte dies sein, bei CI-Farben, man braucht sie nur einmal am Anfang der Datei zu definieren und von da an benutzt man nur noch die Variable. Ändert sich die Farbe ist lediglich eine Änderung an nur einer Stelle nötig.

$color-link: #039;
$color-text: #333;

p {
  color: $color-text;
  a {
    color: $color-link;
  }
}

Die Syntax ist, denke ich, verständlich. Dem ein oder anderen wird schon aufgefallen sein, dass ich die Definition für das a-Tag mit ins p-Tag geschriebe habe. Das ist ein weiteres Feature, das die Lesbarkeit erhöht. Elemente, die in einander verschachtelt sind, schreibe ich nicht mehr in einer Zeile von links nach rechts, ihrer Verschachtelung entsprechend (p a { }), sondern ich verschachtele sie direkt. So ist ein in der Definition für das p-Tag geschriebenes a-Tag lediglich eine andere Schreibweise für

p {
  ...
}
p a {
  ...
}

Auch sind eine Art von Funktion, wie man es aus Programmiersprachen kennt, möglich. So kann man beispielsweise das immer wieder auftauchende Schreiben von Vendor-Prefixes bei neuen CSS-Eigenschaften vermindern, indem man alle Varianten in ein sogenanntes mixin zusammenfasst, Standardwerte vergibt und dieses mixin dann später nur noch aufzurufen braucht.

@mixin shadow($offset-x: 0px, $offset-y: 0px, $blur: 5px, $color: #000) {
  -moz-box-shadow: $offset-x $offset-y $blur $color;
  -webkit-box-shadow: $offset-x $offset-y $blur $color;
  box-shadow: $offset-x $offset-y $blur $color;
}

.box {
  @include shadow(3px, 3px, 10px, #999);
}

Für den Einstieg sollen diese Beispiele erstmal reichen. Wer im Detail nachlesen möchte, was mit Sass alles möglich ist, kann dies in der Doku zum Projekt tun.

Veröffentlicht von

Hilko

2006 machte ich mein Hobby zum Beruf, startete mit einer Ausbildung zum Mediengestalter und arbeite inzwischen in Hannover als Frontend Web-Developer. Neben der Leidenschaft für semantisches Markup und den Möglichkeiten der aktuellen Frontend-Techniken, interessiere ich mich für das Reisen, fremde Kulturen und die Kunst der Fotografie.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.