‘LESS’-CSS is more than you may think…

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 zu 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ß. Ich 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 ist es vielleicht noch wichtig zu erwähnen, dass wir im VisualStudio 2013 und 2012 (mit WebEssentials) bereits einen LESS-Compiler mit integriert haben und sogar eine super Ansicht über das daraus gerenderte CSS.

clip_image002

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

In diesem Bild sehen wir eine geöffnete LESS-Datei im VisualStudio (2013 oder 2012 + WebEssentials) und dem daraus entstandenen CSS-File. Das praktische an der ganzen Sache ist folgendes: VS erstellt automatisch eine dazugehörige CSS-Datei und hält diese 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.

clip_image004

Variablen

Variablen in LESS lassen sich extrem einfach erstellen und verstehen.

clip_image006

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

ob Farben…

clip_image008

Schriftarten(strings), Pixelangaben, oder das Zuweisen anderer Variablen…

clip_image010

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

clip_image012

 

Nested Rules (CSS inheritance)

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

clip_image014

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.

clip_image016

Das ‘&’ vor der :hover Pseudo-Klasse steht für alle vorhergehenden Selektoren und wird zu ‘ul#nav li a:hover’ gerendert’ was auch wiederum enorm viel 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. Das heißt, dass es unter Umständen unnützer CSS-Code erstellt wird.

 

Mixins (Funktionen)

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

clip_image018

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 wahrscheinlich jeder CSS-Tüftler schon sein Leben lang! Endlich sind wir in der Lage einfache bis komplexe Rechenoperationen zu verwenden.

clip_image020

Wie man sieht, können wir nicht nur einfache Werte miteinander addieren, subtrahieren, multiplizieren oder dividieren. Wir können sogar mit HEX-Codes Berechnungen durchführen. Selbstverstä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.

clip_image022

Lighten und Darken sind, denke ich, selbsterklärend. Saturate steht für Sättigung. Jede dieser drei Funktionen bekommt als zweiten Parameter einen Prozentwert ü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.

clip_image024

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 zu geben 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 Doku mit Beschreibung & Beispielen.

Kommentare sind geschlossen