Stylesheet-Sprache Less

Ein CSS Code kann schon nach einigen Zeilen recht unübersichtlich werden, dafür gibt es eine Abhilfe – Less. Less verbindet intelligente Gestaltung mit effizienter Programmierung.

Die Stylesheet-Sprache Less ist ein CSS pre-processor. Das bedeutet, dass aus Less Code, durch JavaScript, CSS Code generiert wird. Die Intention von Less ist es, dass sich CSS effizienter Gestalten und intelligenter Steuern lässt, zudem sollen Wiederholungen vermieden werden.

Und wie funktioniert das? – Less bietet neben normalem CSS Code viele Weitere Möglichkeiten Styles zu definieren. Mann kann unteranderem Variablen, Funktionen, Verschachtelungen, Schleifen und “Where”-Abfragen definieren.

Variablennamen stehen im Less immer hinter einem “@” (at) Zeichen und vor dem Funktionsnamen steht immer hinter einem “.” (Punkt). Verschachtelungen sind eine effektive Möglichkeit Werte zu deklarieren. Geneuer gesagt kann man in Elementen, neue Elemente definieren. Hierzu finden Sie folgend einen kleinen Beispiel-Code.

In dieser Verschachtelung kann man sehen, wie in einem Element weitere Elemente neben den eigentlichen Style-Zuweisungen angesprochen werden. Zudem können Sie, bei der Klasse “.image” sehen, wie mit diesem Verfahren auch der Element Status angesprochen wird.

In Funktionen kann man wie in anderen Programmiersprachen auch Parameter mitgeben um diese in der Funktion zu verwenden. Um sich das Praktisch besser vorstellen zu können, folgt hier ein Beispiel-Code zu einer Einfachen Funktion, wie diese in Less stehen könnte:

In dem Beispiel sieht man sehr schön, die Funktionsweise einer einfachen Less Funktion. Zudem ist es unschwer zu erkennen, wie Platzsparend und effizient man mit Less arbeiten kann.