Kurs:Neueste Internet- und WWW-Technologien/Less CSS

Offizielles LESS Logo

LESS ist eine dynamische Erweiterung für CSS die von Alexis Sellier entwickelt wurde. Der Compiler less.js wird aktuell als open-source Projekt auf GitHub gehosted und liegt in Version 1.3.0 vor. Die wichtigsten Funktionserweiterung von LESS für CSS sind: Variablen, Mixins, Nesting, Operatoren und Funktionen, welche alle unter Verwendung der gängigen CSS Syntax eingebaut wurden, sodass LESS mit CSS Kenntnissen leicht zu erlernen ist.

Kompilierung

LESS CSS wird während der Kompilierung durch less.js in valides CSS umgewandelt, das je nach genutzten CSS Atributen von allen gängigen Browsern gelesen und interpretiert werden kann. Die Kompilierung kann sowohl Clientseitig wie auch Serverseitig vorgenommen werden. Zusätzlich kann der LESS Code als prekompilierte CSS Datei eingebunden werden.

Clientseitig

Um die .less Dateien im Browser (IE6+, Firefox, WebKit Browser) des Nutzers umzuwandeln, wird der Compiler less.js im html-Header der zu stylenden html-Datei zusammen mit den .less Dateien eingebunden:

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

Da LESS Dateien durch die erweiterte Syntax wesentlich kleiner sind als gleichwertige CSS Dateien, spart man durch die clientseitige Kompilierung Bandbreite, muss dafür aber die eventuell nicht gecachte Javascript Datei (ca. 47KB) übertragen. Zusätzlich kann es bei großen LESS Dateien zu geringfügigen Verzögerungen durch die Kompilierung kommen und bei deaktiviertem Javascript muss eine Backup Lösung bereit gehalten werden.

Serverseitig

LESS kann ebenfalls auf einem Server mit Node.js oder Rhino kompiliert werden.

Durch die serverseitige Einbindung spart man die Kompilierung im Nutzerbrowser, schickt dafür aber das komplette kompilierte CSS und muss somit keine Notfalllösung integrieren, für den Fall, dass Javascript nicht aktiviert sein sollte.

Pre-compiled

Die am häufigsten verwendete Variante LESS einzubinden ist den LESS Code lokal zu kompilieren und danach das fertige CSS auf den Server zu laden. Zur lokalen Kompilierung stehen verschiedene Varianten zur Verfügung:

• Im eigenen Browser mit less.js kompilieren
• Über den Kommandozeilenbefehl lessc (Mac/Windows)
• Programme die .less Dateien automatisch kompilieren
  • SimpLESS (Mac/Windows)
  • less.app (Mac)

Durch die Verwendung des vorkompilierten LESS kann man bei der Entwicklung die Vorteile von LESS nutzen, es aber einbinden wie normales CSS ohne sich Gedanken über deaktiviertes Javascript oder serverseitige Kompilierung machen zu müssen. Allerdings verschwindet auch hier, ebenso wie bei der serverseitigen Kompilierung der Vorteil, dass man nur die kürzere LESS Datei übertragen muss.

Funktionen

Im folgenden werden die wichtigsten Features von LESS anschaulich an Beispielen erklärt.

Variablen

Mit LESS ist es möglich Variablen zu definieren die ein oder mehrere Werte wie auch Namen für Variablen enthalten können. Korrekterweise sollte dieses Feature allerdings eher als Konstanten bezeichnet werden, da es nachträglich nicht möglich ist die variablenwerte zu ändern. Zur Definition der Variablen wird folgende Syntax benutzt:

// Definition
@Name: Wert;

//Anwendung
div {
    color: @Name;
}

In der Praxis können Variablen genutzt werden um häufig auftretende Farben oder Maße (z.B. für ein Corporate Design) zentral an einem Ort zu verwalten und Änderungen somit schnell umsetzen zu können. Bei der Kompilierung werden die Namen der Variablen im Code einfach durch ihre Werte ersetzt und die Definitionen werden entfernt wie im folgenden Beispiel gezeigt wird:

LESS:

@bgcolor: #ff6666;
@textcolor: #ffffff;
@border: 1px solid @textcolor;

body {
  background-color: @bgcolor;
  color: @textcolor;
}

div {
  border: @border;
}

kompiliertes CSS:

body {
  background-color: #ff6666;
  color: #ffffff;
}

div {
  border: 1px solid #ffffff;
}

Mixins

Mit Hilfe von Mixins können CSS-Attribute unter einem Klassennamen gruppiert werden um sie in andere Klassen unter Verwendung dieses Namens zu integrieren. Zusätzlich können Mixins Argumente entgegennehmen um das Verhalten des in ihnen enthaltenen Code, ähnlich wie bei Funktionen, anzupassen. Zur Definition von Mixins wird folgender Code genutzt:

// Definition
.Bezeichner (@Argument: Standartwert) {
    // beliebige CSS-Attribute
}

// Anwendung
div {
    .Bezeichner;
    .Bezeichner (Attributswert);
}

In der Praxis kann man dadurch Codedopplungen verhindern oder Mixins schreiben, die zum Beispiel die Browserkompatibilität für CSS3 Features sicherstellen und diese einheitlich bereitstellen. Für den letzteren Anwendungsfall existieren diverse Bibliotheken, die solche Mixins zur einfachen Nutzung bereitstellen wie z.B. LESS Elements.
Ebenso wie bei den Variablen wird bei der Kompilierung von Mixins der Inhalt dieser an den Positionen eingefügt, an denen vorher der Klassenbezeichner als Platzhalter stand. Zusätzlich werden aber noch die dem Mixin übergebenen Argumente bzw. die vorher angegebenen Standardwerte verarbeitet, wie das folgende Beispiel zeigt:

LESS

.border (@color: #000000) {
  border-top: 2px dotted @color;
  border-bottom: 2px dashed @color;
}

div.row {
  padding: 20px;
  color: #000000;
  .border ;
}

div.errorRow {
  padding: 20px;
  color: #ff0000;
  .border (#ff0000);
}

kompiliertes CSS

div.row {
  padding: 20px;
  color: #000;
  border-top: 2px dotted #000000;
  border-bottom: 2px dashed #000000;
}
div.errorRow {
  padding: 20px;
  color: #f00;
  border-top: 2px dotted #ff0000;
  border-bottom: 2px dashed #ff0000;
}

Nesting

Mit dem strukturellen Nesting bietet LESS eine Möglichkeit dazu, dass das von CSS bereitgestellte logische Nesting von Elementen sich auch in der Struktur des Codes widerspiegelt. Weiterhin stellt der Code damit auch die Struktur des DOM Trees dar, wodurch der Code kürzer und leichter lesbar wird. Während der Kompilierung wird diese Codestruktur dann wiederum aufgelöst und in die rein logische und inhaltlich gleichwertige Struktur von CSS transferiert.

LESS:

#footer {
  background-color: #ff5555;
  color: #ffffff;

  a {
    color: #000000;

    &:hover {
      text-decoration:overline;
    }
  }
}

kompiliertes CSS:

#footer {
  background-color: #ff5555;
  color: #ffffff;
}

#footer a {
  color: #000000;
}

#footer a:hover {
  text-decoration: overline;
}

Operationen

Operationen in LESS (+, -, *, /) ermöglichen es mit verschiedensten Werten zu rechnen um das CSS dynamischer zu erstellen und damit besser auf Änderungen reagieren zu können. Dabei kann sowohl mit numerischen Werten, wie Abständen und Maßen, als auch mit Farben und Variablen, die eben diese enthalten, gerechnet werden. Bei der Kompilierung werden die Operatoren samt ihrer Argumente entfernt und durch das Ergebnis ausgetauscht, wie das folgende Beispiel anschaulich darstellt:

LESS:

@color: #eeeeaa;
@bgcolor: #222222;
@contentwidth: 700px;
@adwidth: 100px;

body {
  color: @color / 2;
  background-color: @bgcolor - #111;
  width: @contentwidth + @adwidth;
}

kompiliertes CSS:

body {
  color: #777755;
  background-color: #111111;
  width: 800px;
}

Funktionen

LESS stellt sowohl mathematische wie auch farbmanipulierende Funktionen bereit, zu denen unter anderem folgende gehören:

• Helligkeit erhöhen - lighten(@color, xx%)
• Helligkeit verringern - darken(@color, xx%)
• Farben mischen - mix(@color, @color2)
• Zahl runden - round(@float)
• Prozentwert berechnen - percentage(@float)

Nach der Kompilierung bleiben von den Funktionen lediglich die Ergebnisse übrig. Die Farbfunktionen können zum Beispiel zusammen mit Operationen dazu verwendet werden komplette Farbschemas für eine html-Datei aus einer einzigen Grundfarbe berechnen zu lassen:

LESS:

@color: #576689;

body {
  color: @color;
  background-color: 
    lighten(@color, 30%);
  border: 
    2px solid saturate(@color, 20%);
}

kompiliertes CSS:

body {
  color: #576689;
  background-color: #aeb7cb;
  border: 2px solid #415d9f;
}

Namespaces & Import

Mit Namespaces kann man verschiedene Mixins und Variablen unter einem Index vereinen, auf dessen Inhalt dann zugegriffen werden kann. Der Zugriff auf einen Namespace erfolgt folgendermaßen:

// Definition
#bezeichner {
    //beliebige Mixins und Variablen
}

//Verwendung
div {
    #bezeichner > .mixin;
}

Dabei ist zu beachten dass es momentan nur möglich ist auf Mixins und nicht auf Variablen zuzugreifen. Bei der Kompilierung werden die Inhalte der genutzten Namespace Mixins an die Stelle der Platzhalter kopiert. Jedoch werden die Mixins nicht entfernt sondern bleiben im CSS Code vorhanden.
Mit Hilfe des Imports lassen sich sowohl .less als auch .css Dateien in den LESS Code einbinden:

@import ”lessStyle.less";
@import ”cssStyle.css";

Unter Verwendung dieser beiden Funktionen kann man, wie im folgenden gezeigt, ganze Stylebibliotheken auslagern und leicht auswechselbar machen ohne den eigentlichen Code aufzublähen:

LESS:
redbox.less

#redbox {
  @bgcolor: #e88;
  @fontcolor: #b02; 
  .box {
    background-color: @bgcolor;
    border: 2px solid #000;
  }
  .fontcolor {
    color: @fontcolor;
  }
}

style.less

@import ”redbox.less";

body {
  #redbox > .fontcolor;
}

div {
  color: #000;
  #redbox > .box;
}

kompiliertes CSS:
style.css

#redbox .box {
  background-color: #ee8888;
  border: 2px solid #000;
}
#redbox .fontcolor {
  color: #bb0022;
}

body {
  color: #bb0022;
}
div {
  color: #000;
  background-color: #ee8888;
  border: 2px solid #000;
}

Web-Frameworks

Für viele der verfügbaren Web-Frameworks gibt es mitlerweile Add-Ons oder andere Möglichkeiten, die die Verwendung von Less ermöglichen oder dem Entwickler die Kompilierung abnehmen, wie zum Beispiel für Grails, Django oder CakePhp.

Sass

Sass ist ebenfalls eine dynamische Erweiterung für CSS und hatte dadurch großen Einfluss auf die Entwicklung von LESS. Obwohl Sass sich sehr an Ruby angelehnt hat und dementsprechend mehr Anleihen aus richtigen Programmiersprachen wie for/while-Schleifen und if/else-Statements enthält, hat Alexis Sellier im Gegensatz dazu großen Wert darauf gelegt die Struktur von CSS beizubehalten, sodass jeglicher CSS Code ebenfalls gültigen LESS Code darstellt. Für die Version 3 von Sass haben sich dessen Entwickler von LESS inspirieren lassen und ebenfalls eine neue Syntax eingeführt die CSS wesentlich ähnlicher ist.
Weitere Informationen zum Thema Sass kann man auf der Projekteseite von Sass nachlesen.