Wie der Titel schon verrät werden wir in diesem Beitrag einen der CSS-Precompiler mal genauer unter die Lupe nehmen. Einfach gesagt kann man sich das ganze wie eine Feature-Erweiterung betrachten. Wir erhalten die Möglichkeit Variablen, Funktionen uvm. in unseren Zukünftigen CSS-Files zu verwenden und uns somit das Leben enorm erleichtern. Oft hört man den Spruch “Jeder der CSS mag hat doch nicht mehr alle Tassen im Schrank”. Ich für meinen Teil mag CSS, besonders durch das neue VS2013 & die WebEssentials macht das ganze wieder richtig Spaß, stoße jedoch oft an Punkte wo mich die Sehnsucht nach Variablen oder derartigen Methoden packt. Und genau dafür ist LESS zuständig.

Vorab vll. noch wichtig zu erwähnen, im VisualStudio 2013 und 2012 (mit WebEssentials) haben wir bereits einen LESS-Compiler mit integriert und sogar eine super Ansicht über das daraus gerenderte CSS.

Links: LESS Code | Rechts: CSS Output (nicht editierbar)

In diesem Bild sehen wir einen geöffneten LESS File im VisualStudio (2013 oder 2012 + WebEssentials) und dem daraus entstandenem CSS-File. Das praktische an der ganzen Sache ist folgendes, VS erstellt automatisch einen dazugehörigen CSS-File und hält diesen immer up-to-date. Also müssen wir nicht immer z.B. extra einmal einen Build ausführen oder derartiges. Sogar eine minified Version des ganzen wird uns zur Verfügung gestellt. Ohne VS müsste man das ganze on-the-fly kompilieren, für jeden erneuten Request, was nur unnötig Zeit verbrauchen würde.

Variablen

Variablen in LESS lassen sich extrem einfach erstellen und verstehen.

Der Wert welchen wir dieser Variable nun zuweisen ist komplett uns überlassen.

ob Farben…

Schriftarten(strings), Pixelangaben, oder das zuweisen anderen Variablen…

…alles ist möglich. Dadurch lassen sich auch wunderbar sog. Abstraktions-Ebenen erstellen um den Code Wiederverwendbarer zu halten:

Nested Rules (CSS inheritance)

Durch Nested Rules können wir bereits verwendete CSS Konstrukte in andere einbinden und dadurch wiederverwenden.

Wie wir sehen werden ‘btn’ als auch ‘btn-default’ ganz normal gerendert. Jedoch enthält btn-default alle Eigenschaften von btn.

Ein gutes Beispiel bzw. guter Anwendungsfall hierfür wäre die allseits bekannte Navigation.

Das ‘&’ bevor der :hover Pseudo-Klasse steht für alle vorhergehenden Selektoren und wird zu ‘ul#nav li a:hover’ gerendert’ was auch wiederum enorm getippe spart.

Problem hierbei, wenn wir die Nested Rule als Art Basis-Klasse verwenden wollen stellen wir bald fest, dass diese immer mit gerendert wird. D.h. es wird unter Umständen unnützer CSS-Code erstellt.

Mixins (Funktionen)

Diese Mixins sehen aus, wie ganz normale CSS-Klassen haben aber jedoch noch die Option Parameter mit zu übergeben. Diesen Parametern kann man sogar noch Default-Werte verpassen wenn man das möchte.

Interessant hierbei, das Mixin selbst erzeugt keinerlei CSS und lässt dieses am Ende dadurch schlanker wirken und kann nun beliebig oft verwendet werden.

Funktionen & Berechnungen

Ja endlich! Darauf wartet wsl. jeder CSS Tüftler schon sein Leben lang! Endlich sind wir in der Lage einfache bis komplexe Rechenoperationen zu verwenden.

Wie man sieht können wir nicht nur einfache Werte miteinander Addieren, Subtrahiere, Multiplizieren oder Dividieren. Wir können sogar mit HEX-Codes Berechnungen durchführen. Selbst verständlicherweise nur + und –. Hierbei ist anzumerken, dass + oder - #000 immer als 0 gehandhabt wird und + #fff immer in #ffffff (weiß)  endet als auch - #fff immer in #000000 (schwarz) endet.

Dazu kommen noch spezielle Funktionen welche uns den Umgang mit Farben im Allgemeinen erleichtern sollen bzw. die Berechnung dieser.

Lighten und Darken sind denke ich selbst erklärend. Saturate steht für Sättigung. Jede dieser 3 Funktionen bekommt als 2ten Parameter einen % wert übergeben (0-100).

Spin hingegen ‘verschiebt’ die Farbe um einen gewissen Wert auf dem Farbenkreis und kann somit maximal Werte von 0-360 annehmen. Alles was darüber hinausgeht führt zu einer weiteren Umdrehung.

Quelle: Wikipedia - http://de.wikipedia.org/wiki/Farbkreis

Fazit

Sieht ganz so aus als ob wir in Zukunft ein neues Spielzeug haben :-)

Generell ist diese CSS-Precompiler-Geschichte eine recht interessante Sache und kann schon mit relativ einfachen Mitteln durchaus effektiv genutzt werden. Jedoch soll an dieser Stelle angemerkt werden, dass dies nur ein minimaler und kurzer Auszug aus der gesamten Funktionalität von LESS sein sollte um einen kleinen Vorgeschmack darauf zugeben und evtl. Lust auf mehr zu machen.

Für alle, die sich die Sache noch intensiver anschauen möchten empfehle ich die offizielle LESS-Website. Auf dieser befindet sich eine Docu mit Beschreibung & Beispielen.