Einführung

Jeder von euch, der schon einmal css gesehen und vielleicht sogar verwendet hat, wird spätestens bei großen Stylesammlungen gemerkt haben, dass es furchtbar komplex ist, diese im Nachhinein zu warten und gar zu erweitern. Ein Hauptgrund hierfür ist zum Beispiel, dass das css wie wir es kennen keinerlei Konstanten kennt. So muss exemplarisch gesehen die Schriftfarbe immer vererbt oder genclass="content-fragment page no-wrapper" id="fragment-6615">
Hier kommt nun die Sache mit den kompilierten Stylesheets ins Gespräch. Diese bieten mit einfachen Syntax eine Möglichkeit Variablen zu verwenden, Klassen in Klassen zu schreiben und diese ganzen fancy Tricks mit normalen css Layout zu kombinieren. Wie das aussieht erfahrt ihr etwas weiter unten. 

less vs. sass

Es gibt momentan zwei grosse Vertreter dieser Spezies. Auf der einen Hand das aus dem node.js Lager kommende less und das etwas generischere sass. 

less kann zu Testzwecken lokal im Browser mittels einem einfachen Javascript Snippet gebaut werden, im produktiven Einsatz sollte es precompiled oder mittels der engen node.js Verwandtschaft auf dem Server gebaut werden. Aus verschiedenen Quellen wurde mir jedoch wegen dieser doch etwas komplizierteren Art und der kleinere Community von less abgeraten. Wobei ich persönlich sagen muss, dass der less Syntax fuer mich noch einfacher war als der von sass. 

sass hingegeben spuckt nach dem Kompilieren eines *.scss Files bereits bereits lokal eine einfache *.css Datei aus, welche man wie ein gewöhnliches Stylesheet einbinden kann. 

Aus diesem Grund habe ich für meine Beispiele sass verwendet. 

Benutzung

 

Vorbedingungen

Da sass wie auch less auf Ruby basiert muss dieses auf dem Zielrechner vorhanden sein. Linux und MacOSX bringen dies Standardmaessig mit, fuer Microsoft Windows gibt es einen einfachen grafischen Klickinstaller. Dieser kann hier heruntergeladen werden.  

Dies war auch schon alles. Das sass Paket an sich muss nicht extra geladen werden, da dies via dem Ruby-Paket nachinstalliert wird. Vergleichbar ist dies mit einem Paketmanager unter Linuxsystemen. 

Installation

Hierzu öffnet man die Kommandozeileneingabe. Zu dieser gelangt ihr in dem ihr entweder im Metro-Startmenue "cmd" oder auf dem Desktop mit Windows-R und "cmd" eingebt. 

Mit dem unten stehenden Befehl wird nun das sass Paket installiert und fuer euch eingerichtet. Dies dauerte bei mir nicht einmal fuenf Minuten ohne jegliches zutun. 

gem install sass

Nun könnt ihr es auch schon verwenden. Da es ja sehr mühselig wäre, bei einem so schnellen Entwicklungsprozess wie in html und css ermöglicht immer manuell das File kompilieren zu müssen, hat sass hierfür einen bequemen Weg für euch.

Verwendung

Nun könnt ihr es auch schon verwenden. Da es ja sehr mühselig wäre, bei einem so schnellen Entwicklungsprozess wie in html und css ermöglicht immer manuell das File kompilieren zu müssen, hat sass hierfür einen bequemen Weg für euch. 

Sass ermöglicht es euch, so genannte Watcher auf Dateien zu setzen. Diese lösen einen Kompiliervorgang immer wenn ein Save-Hook oder ein Änderungsevent getriggert wurde. Dies ist so intelligent, dass sass merkt, dass ihr verschiedene Files inkludiert habt und bemerkt Veränderungen dieser. Ich war sehr überrascht als ich dies bemerkte! 

Um diesen Watcher zu setzen geht ihr mittels der cmd.exe in euer gewuenschtes Verzeichniss wo zum Beispiel die css Datei liegt und startet mit folgenden Befehl den Watcher:

Sass ermöglicht es euch, so genannte Watcher auf Dateien zu setzen. Diese lösen einen Kompiliervorgang immer wenn ein Save-Hook oder ein Änderungsevent getriggert wurde. Dies ist so intelligent, dass
sass merkt, dass ihr verschiedene Files inkludiert habt und bemerkt Veränderungen dieser. Ich war sehr überrascht als ich dies bemerkte! 


sass --watch myStyle.scss:myStyle.css

Wie ihr seht, setze ich hiermit den Watcher auf myStyle.scss und jedes mal bei einer Aenderung baut er mir meine myStyle.css. Der Bau dauert nur wenige Sekunden, so schnell könnt ihr nicht einmal schauen.  

Ein dicker Vorteil: Fehlerkonsole. In der Ausgabe der cmd.exe werden jegliche Fehler die euch eventuell unterlaufen sind ausgegeben inklusive der Zeilennummer und wie ihr es eventuell fixen könnt. Sehr nützlich! 

Syntax

Fuer eine volle Beschreibung des Syntaxes ist dieser zu umfangreich und mein Wissen noch zu klein, aber es gibt ein paar sehr nützliche Dinge. 

Variablen

$myVarColor: red; 

.bgColor{ 
  background-color: $myVarColor; 
}

Dies ist sehr hilfreich, wenn man mit festen Farben wie zum Beispiel aus einer CI arbeiten muss. Diese sich jedoch vielleicht noch aendern. In einer normalen css-Architektur waere man sehr lange unterwegs um jeglichen Farbcode der alten Palette durch den der neuen zu ersetzen. 

Funktionen

  
@mixin rounded($radius: 10px) {  
  border-adius: $radius;    
} 

.myClass { 
  @include rounded(top); 
}

Oft gibt es viele css Klassen, welche sich nur in den Attributen unterscheiden. Beispielsweise Spaces, Radien oder Farben. Für solche Zwecke können nun sass-Funktionen verwendet werden. 

weitere Beispiele 

schaut einfach einmal im Einsteigertutorial von sass-lang.com nach. Hier findet ihr diese und viele weitere Beispiele schön erklärt! 

Verwendung in Metro Apps

Hierbei müsst ihr mittels Visual Studio erst eine Referenz in euer Projekt laden. Dies funktioniert via Solution-Explorer und: Rechtsklick -> Add -> Existing Item -> myStyle.css. Dieser Schritt ist nur einmal fällig!

Einbinden könnt ihr dann das fertige css-File wie auch alle anderen Stylesheets beispielsweise via:

<link href="/css/myStyle.css" media="screen" rel="stylesheet" type="text/css"/>

Fazit

Mit dieser Technik und aus dieser heraus kompilierten Stylesheets ist es möglich, eine Menge Arbeit und Stress einzusparen. Vor allem bleibt der Stylesheet-Code auch auf längere Zeit hin wartbar und übersichtlich.