CSS leicht gemacht – wichtige Kniffe für mehr Übersicht
Beim Bau einer CSS-Datei kommt es nicht selten vor, dass man für verschiedene Elemente ähnliche oder gar redundante Anweisungen vornimmt. Bestes Beispiel hierfür sind Farbangaben. Aber auch Angaben für Formatierungen, Abstände oder Größen weisen häufig Abhängigkeiten innerhalb einer oder mehrerer CSS-Dateien auf. Ein Programmierer würde hier wiederkehrende Elemente zentral definieren, Vorlagen verwenden und den eigentlichen CSS-Quellcode anschließend generieren lassen. Genau das ist der Ansatz von Syntactically Awesome Stylsheets (SASS) [1]. CSS-Stylesheets werden um Möglichkeiten erweitert, die Zusammenhänge zwischen verschiedenen Angaben in Form einer eigenen „Sprache“ notieren.
Eines der Ziele bei der Entwicklung der nächsten TYPO3-Generation 5.x (Codename „Phoenix“) war es, wo möglich auf Grafiken zu verzichten und gestalterische Elemente durch die reine Verwendung von HTML und CSS abzubilden. Dies erleichtert dann auch die einfache und zentrale Anpassbarkeit. Entsprechend verwundert es wenig, dass sich die Entwickler entschieden, die CSS-Angaben mit Hilfe von SASS aus zentralen Layout-Definitionen zu generieren.
Bei SASS existieren zwei verschiedene Syntax-Varianten. Die klassische Syntax (Dateiendung .sass) verzichtet auf Klammern und setzt stattdessen auf Einrückungen zur Gliederung von Elementen. Die ab SASS3 unterstützte „SCSS“-Syntax („Sassy CSS“, dt.: freches CSS, Dateiendung .scss) hingegen setzt auf CSS3, verwendet also Klammern und erweitert CSS um zusätzliche Möglichkeiten. Innerhalb eines Projekts ist es auch möglich, SASS- und SCSS-Syntax zu mischen. Je Datei findet aber jeweils nur eine Syntax Anwendung. Im Folgenden liegt der Fokus auf der SCSS-Syntax.
Erste Schritte
Das Werkzeug zur Umwandlung von SCSS/SASS-Code in CSS-Code selbst ist in Ruby geschrieben. Aber keine Angst: Wer das Tool nicht im Kern erweitern, sondern einfach nur nutzen möchte, benötigt keine Ruby-Kenntnisse. Nach Installation des Ruby-Gems „haml“ per „gem install haml“ ist das SASS-Tool auch schon für den ersten Einsatz bereit. Wer ein HAML-Paket seiner Linux-Distribution nutzen möchte, sollte beachten, dass dies die SCSS-Syntax erst ab Version 3.0 unterstützt.
Mit „sass style.scss:style.css“ ist die Konvertierung einer einzelnen Datei möglich. Alternativ können hier auch Quell- und Zielverzeichnis angegeben werden, die dann rekursiv abgearbeitet werden. Mit „sass –watch style.scss:style.css“ ist es außerdem möglich, einen Live-Modus zu aktivieren, bei dem die Quelldateien auf Änderungen beobachtet und die Zieldateien automatisch neu generiert werden.
Wie die Ausgabe aussieht, bestimmt das „–style“-Attribut. Standardmäßig aktiv ist „nested“; Einrückungen also, die die CSS-Hierarchie leserlich darstellen. Alternativ lassen sich die Angaben über „compressed“ auf das Nötigste reduzieren oder mittels „compact“ auf eine Zeile komprimieren.
Variablen
Jede gültige CSS3-Datei ist automatisch auch eine gültige SCSS-Datei. Ein zu Beginn häufig verwendetes Beispiel ist die zentrale Definition von Farben und Größenangaben mit Hilfe von Variablen. Diese werden in der Form „$variablenname“ angegeben, gefolgt von einem Doppelpunkt sowie dem gewünschten Wert, der selbst eine gültige CSS-Angabe ist. Auch ist es möglich, einfache mathematische Konstrukte wie Additionen oder Multiplikationen zu nutzen. Für diverse andere Anwendungen stehen sogar Funktionen bereit, etwa zur Berechnung von Farbwerten.
$dark-white: #f1f1f1; $grey: lighten(#000000, 20%); $light-grey: #9e9e9e; $small-radius: 3px; $mid-radius: 5px; a.link-help { color: $light-grey; } div.button { width: 20px - 2*$small-radius; }
Listing 1
Wiederkehrende Angaben lassen sich auch per „mixin“ auslagern und dann über „include“ an verschiedenen Stellen nutzen. Dabei ist die Angabe von optionalen Parametern möglich – ganz im Stil programmierter Funktionen.
@mixin rounded-corners-middle-right { -moz-border-radius: 0 $mid-radius $mid-radius 0; -webkit-border-radius: $mid-radius; } @mixin spacing($margin: 5px) { margin-right: $margin; } .errorMessages { @include rounded-corners-middle; @include spacing(10px); border: 1px solid #000000; }
Listing 2
Verschachteln
Besonders hilfsreich ist die Verwendung von verschachtelten Angaben. Sie erleichtern den Überblick, geben den Definitionen klare Strukturen und ermöglichen auf einfache Weise beispielsweise die Umbenennung einer class-Angabe.
table.menu { background-color: blue; td.active { font-weight: bold; label { margin-left:10px; } } } div.headline { font: { weight: bold; size: 1.2em; } }
Listing 3
table.menu { background-color: blue; } table.menu td.active { font-weight: bold; } table.menu td.active label { margin-left: 10px; } div.headline { font-weight: bold; font-size: 1.2em; }
Listing 4
Vererben
.important { font-weight:bold; } .headline { font-size:1.2em; } .importantErrorheadline { @extend .important; @extend .headline; color: red; }
Listing 5
Durch die Vererbung von einem oder mehreren Selektoren ist es möglich,
selbst komplizierte Abhängigkeiten einfach und strukturiert abzubilden.
Auch ist die Vererbung entlang einer Kette von Selektoren ist möglich.
.important, .importantErrorheadline { font-weight: bold; } .headline, .importantErrorheadline { font-size: 1.2em; } .importantErrorheadline { color: red; }
Listing 6
Auslagern und Einbinden
Wiederkehrende Werte und Definitionen werden bestenfalls bereits zu Beginn ausgelagert. Dies ermöglicht es, die im weiteren Verlauf eines Projekts üblicherweise stetig steigende Komplexität der CSS-Angaben auf ein überschaubares Maß zu reduzieren. Auch lassen sich so Module in verschiedenen CSS-Dateien zentral und einfach wiederverwenden. Dank mathematischer Ausdrücke und Funktionen lassen sich so Ursprungswerte wie die zu verwendende Bildschirmbreite zentral ändern und abhängige Werte automatisch neu berechnen.
@include „Dateiname“;
Listing 7
Beginnt der Dateiname mit einem
Unterstrich, signalisiert dies SASS übrigens, dass die Datei nicht in eine
eigenständige CSS-Datei zu konvertieren ist. Sie wird stattdessen lediglich als Modul
innerhalb anderer Dateien genutzt.
Fazit
Die Möglichkeit beispielsweise Längen, Abstände und Farben zentral zu definieren erhöht die Übersichtlichkeit bereits enorm [2]. Verbunden mit mathematischen Operationen, Funktionen und wiederverwendbaren Blöcken wird es auf flexible Weise möglich, mit CSS-Angaben zu „programmieren“. Der Funktionsumfang lässt sich zudem durch andere Bibliotheken, etwa Compass [3], erweitern – sie bringen fertige Mixins, Vorlagen und eine wachsende Community. Durch die Generierung von standard-konformem CSS3 lässt sich SASS/SCSS außerdem ohne Anpassung mit allen Browsern nutzen.