Bei Mayflower wird agil entwickelt. In erster Linie bedeutet dies für den Kunden, dass wir auf geänderte Anforderungen schnell reagieren können.
Schnell reagieren zu können heißt auch, neue oder geänderte Anforderungen so schnell wie möglich umzusetzen.
Dafür muss der Code so aufgebaut sein, dass man mit minimalen Aufwand Änderungen durchführen kann.
In PHP nutzen wir dafür entsprechende Abstraktionen und Kappselungen.
Aber wie schaut das Ganze im Frontend aus, insbesondere in CSS Dateien?
Was, wenn der Kunde das Blau aus dem vorgegebenen Farbschema eine Nuance dunkler haben möchte?
Meist bedeutet eine solche Anforderung viel Arbeit, da jedes Element, welches die Farbe einsetzt, daraufhin überprüft werden muss, ob die Farbe entsprechend angepasst werden soll oder nicht.
Oder was ist, wenn der Kunde gerne CSS3 Eigenschaften, etwa einen Farbverlauf, nutzen möchte?
Hier haben die Browser aktuell zumeist keine standardisierten CSS Attribute, sondern jeder nutzt seine eigenen Eigenschaften.
Nun könnte man an jeder Stelle, an der ein Farbverlauf gewünscht ist, für jeden Browser die entsprechende Eigenschaft angeben.
Dies ist jedoch nicht empfehlenswert. Einerseits bedeutet dies mehr Schreibarbeit, das heißt, es wird mehr Zeit benötigt, um die Anforderung umzusetzen, andererseits lässt sich duplizierter Code nur schwer warten, was gerade im Hinblick auf die Möglichkeit, dass die Anforderungen sich bald wieder ändern können, zu Mehraufwand führt.
Ein Wermutstropfen vornweg. Mit herkömmlichen CSS ist diese Umsetzung fast unmöglich.
Zum Glück gibt es entsprechende Tools, wie etwa SASS, Stylus oder LESS, welches zum Beispiel von Dojo seit Version 1.6 für Dijit Themes genutzt wird.
Im Folgenden werde ich mich auf SASS Konzentrieren, welches sich jedoch zu LESS und Stylus nur in Kleinigkeiten unterscheidet.
Zudem werde ich anhand eines bestehenden CSS erklären, wie dieses durch geschicktes Refactoring soweit abstrahiert werden kann, dass ein schnelles Reagieren auf geänderte Anforderungen möglich ist.
Als Beispiel wird das CSS des Standard Themes „Azure“ des OXID E-Shops dienen, da dieser in der Community Edition Open Source Verfügbar ist.
Installation
SASS ist ein in Ruby geschriebenes Tool, so dass eine funktionierende Ruby-Installation Voraussetzung ist.
Am einfachsten ist eine Installation über den Ruby Paketmanager Gem:
gem install sass
Grundsätzliche Verwendung
Da SASS-Dateien einen anderen Aufbau haben als normale CSS-Dateien, kann der Browser diese nicht interpretieren.
Das bedeutet, wir müssen unsere SASS-Dateien vor der Auslieferung an den Browser zu CSS-Dateien konvertieren.
Üblicherweise geschieht dieser Schritt schon während der Entwicklung, indem der Befehl sass –watch sassfile.scss:cssfile.css im Hintergrund ausgeführt wird.
Dieser bewirkt, dass SASS die angegebene SASS-Datei (mit der Endung .scss) bei jeder Änderung in die angegebene CSS-Datei konvertiert.
Weitere Optionen, wie etwa das Encoding, sind in der Dokumentation zu finden.
CSS2SASS
Da in der Realität die wenigstens Projekte von Null starten werden, ist es nützlich, dass schon bestehende CSS nach SASS überführen zu können.
Hierfür nutze ich das Tool CSS2SASS, welches auch online verfügbar ist.
Das Konvertieren in SASS löscht dabei Semikolon und geschweifte Klammern, da diese für SASS nicht notwendig sind.
Wer jedoch die bessere Lesbarkeit, die diese mit sich bringen, erhalten möchte, der sollte in SCSS konvertieren.
SASS selber kann mit beiden Dateiformaten umgehen.
Weniger Code durch einfache Mixins
Innerhalb der Datei oxid.css im Ordner out/azure/src/css findet man mehrfach unten stehenden Code.
background: #ec6105 url("../bg/svg/grad_orange.svg");
background: -moz-linear-gradient(#ff8604, #ec6105);
background: -ms-linear-gradient(#ff8604, #ec6105);
background: -webkit-gradient(linear, left top, left bottom, from(#ff8604), to(#ec6105));
background: -webkit-linear-gradient(#ff8604, #ec6105);
background: -o-linear-gradient(#ff8604, #ec6105);
background: linear-gradient(#ff8604, #ec6105);
Wenn nun der Gradient angepasst werden soll, so muss dies an mehreren Stellen geschehen.
Hier lohnt es sich, den Gradient einmalig zu definieren und an allen Stellen nur noch aufzurufen, ähnlich wie dies mit Auslagerung von mehrfach genutzten Methoden in PHP erreicht wird. In SASS wird dies über sogenannte Mixins erreicht.
Ein Mixin ist an sich eine Funktion, die innerhalb der SASS-Datei mit dem Befehl: @include NameDesMixins aufgerufen werden kann.
Definiert wird ein Mixin einmal innerhalb der Datei, am besten am Anfang, mit dem Befehl: @mixin NameDesMixins. Gefolgt von den entsprechenden CSS-Anweisungen in geschweiften Klammern.
Obiger Farbverlauf sähe als Mixin wie folgt aus:
@mixin gradient-orange {
background: #ec6105 url("../bg/svg/grad_orange.svg");
background: -moz-linear-gradient(#ff8604, #ec6105);
background: -ms-linear-gradient(#ff8604, #ec6105);
background: -webkit-gradient(linear, left top, left bottom, from(#ff8604), to(#ec6105));
background: -webkit-linear-gradient(#ff8604, #ec6105);
background: -o-linear-gradient(#ff8604, #ec6105);
background: linear-gradient(#ff8604, #ec6105);
}
Somit ist weniger Code zu schreiben und man muss den Gradienten nur noch einmal zentral ändern, um auf neue Anforderungen zu reagieren.
Eigenschaften zentralisieren
Nun haben wir im obigen Beispiel aber immer noch einige Tipparbeit, um zum Beispiel die Farben für den Gradient zu ändern.
Auch hierfür bietet SASS eine Lösung.
Es gibt die Möglichkeit, beliebige Attribute als Variablen zu nutzen.
Variablen werden wie in PHP mit einem Dollarzeichen begonnen und können einen beliebigen Namen haben.
Für obiges Beispiel können wir die URL zum SVG, die beiden Farben für den Gradienten als Variablen definieren, um uns so die Arbeit zu erleichtern.
Dies sieht dann wie folgt aus (auszugsweise):
$gradient-orange-background-color: #ec6105;
$gradient-orange-background-color-light: #ff8604;
$gradient-orange-background-image: "../bg/svg/grad_orange.svg";
@mixin gradient-orange {
background: $gradient-orange-background-color url($gradient-orange-background-image);
background: -moz-linear-gradient($gradient-orange-background-color-light, $gradient-orange-background-color);
[...]
}
Mixins mit Parametern
Meist haben wir nicht nur einen Gradienten, sondern mehrere in Unterschiedlichen Farben.
Um dies nicht in eine weitere Codeorgie ausarten zu lassen, gibt uns SASS hier die Möglichkeit, abstrakte Mixins zu definieren, denen Parameter übergeben werden können.
So können wir zum Beispiel einen zweifarbigen Farbverlauf definieren, dem zwei entsprechende Farben übergeben werden, sowie ein SVG als Fallback, wenn der Browser keinen Farbverlauf kann.
Dafür wird der Mixin wieder über @mixin NameDesMixins definiert, gefolgt von den übergebenen Variablen in Klammern.
Diese Variablen können dann innerhalb des Mixins verwendet werden.
Unser abstrakter Gradient wird wie unten stehend definiert:
@mixin abstract-gradient($color-1, $color-2, $fallback-svg-url) {
background: $color-2 url($fallback-svg-url);
background: -moz-linear-gradient($color-1, $color-2);
background: -ms-linear-gradient($color-1, $color-2);
background: -webkit-gradient(linear, left top, left bottom, from($color-1), to($color-2));
background: -webkit-linear-gradient($color-1, $color-2);
background: -o-linear-gradient($color-1, $color-2);
background: linear-gradient($color-1, $color-2);
}
Zu obigen Gradient kommt nun noch ein blauer Gradient hinzu.
Auch die konkreten Farbverläufe werden wieder als Mixins definiert, die intern den abstrakten Gradienten aufrufen und ihre entsprechenden Farben übergeben, diesmal im Klartext, um die Lesbarkeit für das Beispiel zu erhöhen:
@mixin gradient-orange {
@include abstract-gradient(#ff8604, #ec6105, "../bg/svg/grad_orange.svg");
}
@mixin gradient-blue {
@include abstract-gradient(#ff8604, #ec6105, "../bg/svg/grad_orange.svg");
}
Weitere Möglichkeiten
Die gezeigten Beispiele sind nur exemplarisch.
SASS hat noch viele weitere Eigenschaften – etwa zum Berechnen von Farben und Maßangaben; das Verschachteln von Elementen; die Vererbung von Eigenschaften mit dem Befehl: @extend ElternElement; If-Else Konstrukte; While-, For- und Each-Schleifen und die Möglichkeit, Funktionen zu schreiben, die etwa Berechnungen durchführen.
Alle Möglichkeiten, die SASS bietet, hier zu erläutern, würde mit Sicherheit den Rahmen sprengen. Diese können jedoch in der sehr ausführlichen Dokumentation nachgelesen werden.
Fazit
Das eigene CSS zu Verbessern, ist anfangs mit einigem Mehraufwand verbunden. Dieser macht sich jedoch schon bald bezahlt, da Änderungen sehr viel schneller umgesetzt werden können.
Gerade für Projekte, in denen sich das Aussehen des Frontends beständig ändert, bietet SASS neben einer entsprechenden Template Engine ein sehr gutes Tool, um diese Änderungen mit minimalem Aufwand umzusetzen.