Unter den vielen Neuheiten in Joomla! 3 befindet sich auch die Implementierung von LESS. Mancher mag schon von LESS gehört haben oder kennt dieses Ding sogar schon, weiss damit umzugehen, wendet es an. Für alle, die über LESS im Allgemeinen etwas lernen möchten (oder auch nur ihr Wissen auffrischen wollen) bietet dieser Artikel eine Übersicht und zeigt auf, wie LESS in Joomla! implementiert wird.

LESS ist ein dynamisches Stylesheet. Um LESS zu verstehen, mag der Vergleich mit der Sprache PHP sinnvoll sein. Ähnlich wie PHP vom Server interpretiert und dann als HTML ausgegeben wird, wird LESS interpretiert von einer Software und dann als CSS ausgegeben. So einfach ist das.

Genauer gesagt ist LESS im Grunde genommen eine Erweiterung der Funktionalität von CSS. Dieser Artikel behandelt im Folgenden drei Features von LESS: Variablen, Mixins, and Funktionen.

Variablen

Mit LESS ist es möglich, ein ganzes Set von Variablen zu definieren, welche dann im gesamten Stylesheet immer wieder verwendet werden können. Im Folgenden definieren wir drei Variablen und zeigen, wie diese im CSS angewendet werden:

@primary : #336699;
@secondary : #444444;
@bordercolor : #d5d4d4;

Sind diese Variablen erst einmal definiert worden, können sie überall im CSS verwendet werden:

a.readon 
{
 color: @secondary;
}
h1 
{
 color: @primary;
 border: 1px solid @bordercolor;
}

Wird dieser Code vom Kompiler gelesen, generiert er daraus herkömmlichen CSS Code, der genauso aussieht wie man sich das gewöhnt ist.

So einfach ist das. Das Beispiel mag zwar weder einen grossen Vorteil noch eine bedeutende Zeitersparnis aufzeigen, aber im Kontext eines ausgewachsenen Templates mit hunderten von Zeilen CSS wird es eben sehr simpel, mal auf die Schnelle eine Farbe, eine Rahmenbreite, einen Radius zu ändern: Man ändert eine Variable am Anfang des Files - die Änderung erfolgt also an genau einer Stelle.

Mixins

Mixins sind eine originelle Art zu sagen, dass man ein ganzes Set von Stilanweisungen auf eine andere CSS Anweisung anwenden kann. In gewisser Weise funktioniert das ähnlich wie eine Variable, nur inkludiert man jetzt anstelle eines einzelnen Wertes einen ganzen Stil. Das sieht dann so aus:

.thinborder(@radius: 5px, @color: #d5d4d4, @width: 1px) 
{
 border: @width solid @color;
 -webkit-border-radius: @radius;
 -moz-border-radius: @radius;
 border-radius: @radius;
}

Der .thinborder Stil kann jetzt so weiterverwendet werden:

.moduletable {
 .thinborder(2px,#336699);
}

Wie man leicht feststellen kann, ist es hier möglich, jeden einzelnen (oder keinen) der Parameter zu ändern. Jeder nicht überschriebene Parameter wird durch den Defaultwert ersetzt (im Beispiel oben wäre das die Breite von 1px). Auch hier ist zu bemerken, dass dies ein fantastischer Weg ist, umfangreiches CSS zu schreiben ohne die vielen (und Fehleranfälligen) Wiederholungen von einer CSS Datei. Das einfache Editieren des ursprünglichen Stils ersetzt auch hier sämtliche Ableitungen im gesamten Stylesheet.

Funktionen

Zu guter Letzt schauen wir uns die Funktionen von LESS an. LESS Funktionen führen einfache Operationen auf Variablen aus. Funktionen können multiplizieren, dividieren, addieren und subtrahieren. Sie sind damit eine mächtige Methode, aus einem einfachen Stilelement Ableitungen zu erstellen, welche für einen bestimmte Zweck manipuliert werden können. Man sehe sich das folgende Beispiel an:

//Define variables
@borderwidth : 2px;
@background : #222222;


.moduletable {
 background-color: (@background / 4);
 border: (@borderwidth + 1) solid (@background * 2);
}

Ein einmal definierter Standardstil lässt sich also mittels den LESS Funktionen leicht für bestimmte Situationen im Template verändern, und das ohne dass der Stil jedes Mal neu mit allen CSS Definitionen aufgebaut werden muss.

Das Beispiel oben zeigt eine Situation einer definierten Hintergrundfarbe, die nun je nach Situation rechnerisch variiert werden kann. In diesem speziellen Fall wird sowohl die Hintergrunds- als auch die Rahmenfarbe durch eine Rechenoperation von der definierten Variable @background abgeleitet.

Es gibt noch viele andere Möglichkeiten von LESS, wir wollten hier nur ein paar Beispiele zeigen. Nun sehen wir uns noch an, wie LESS in einem Joomla! Template angewendet wird. Für weitere Informationen und Fragen kann die offizielle LESS Seite besucht werden: http://lesscss.org.

Wie LESS in Joomla! Templates implementiert wird

Joomla! 3 beinhaltet eine JUI Bibliothek, und zwar im /media Verzeichnis. Dieser Ordner enthält sämtliche zur Verfügung stehenden LESS Dateien. Joomla! Templates können diese verwenden, indem sie in die Template-eigene LESS Datei importiert werden. Nachfolgendes Beispiel zeigt dies:

// CSS Reset
@import "../../../media/jui/less/reset.less";
// Grid system and page structure
@import "../../../media/jui/less/scaffolding.less";
@import "../../../media/jui/less/grid.less";
@import "../../../media/jui/less/layouts.less";
// Base CSS
@import "../../../media/jui/less/type.less";
@import "../../../media/jui/less/code.less";
@import "../../../media/jui/less/forms.less";
@import "../../../media/jui/less/tables.less";

Eine Übersicht aller importierbaren Dateien steht hier:
http://jui.kyleledbetter.com/less

Sind alle Basisklassen, welche im Template verwendet werden sollen einmal importiert, und sind die eigenen LESS Stile definiert, kann die ganze LESS Datei zu einer CSS Datei kompiliert werden, welche dann alle Stile für das Template enthält. Um LESS zu kompilieren, benötigt man einen Kompiler. Das soll aber niemanden abschrecken, es ist nur ein Ausdruck dafür, dass schlussendlich ein Prozess da sein muss, welcher die LESS-spezifischen Variablen, Mixins und Funktionen parsen und daraus gültigen CSS Code schreiben kann. Die mitgelieferten Joomla! Templates benutzen dazu eine eigens dafür geschriebene kleine Plattform Applikation. Der Code dazu steht für den persönlichen Gebrauch auf dem GitHub Verzeichnis für das Joomla! CMS zur Verfügung:

https://github.com/joomla/joomla-cms/blob/master/build/generatecss.php

Diese Datei enthält eine spezielle doExecute Funktion, welche die CSS Dateien basierend auf einer standard Joomla! Klasse (JLess) schreiben kann. Führt man die Funktion aus, werden alle CSS Files in das Template geschrieben. So einfach ist das.

Zusammenfassung

Der ganze hier beschriebene Prozess ist nicht allzu technisch für den normalen Benutzer. Alles ist relativ einfach zu Verstehen, und man wird angenehm überrascht sein, wie nahtlos sich alles integrieren lässt. Leute, fangt heute noch an, LESS zu schreiben. Profitiert von den vorhandenen Klassen im Ordner JUI / LESS und schreibt euer nächstes Template mit dem mächtigen LESS.

Das Original dieses Artikels stammt aus der Feder von David Hurley und erschien im Joomla! Community Magazine März 2013