CSS-Konzentrat: LESS bietet mehr

© Internet Magazin

Die Javascript-Bibliothek LESS

lesscss.org/ winless.org/ wearekiss.com/simpless incident57.com/less/ dev.w3.org/csswg/css-variables/

Bei der Gestaltung von Websites gibt es keine Alternative zu CSS. Aber schön ist CSS-Code nicht immer. Gerade bei komplexen Layouts können Stylesheets ziemlich lang werden, so umfasst etwa das Stylesheet des Wordpress Themes Twenty-Eleven über 2.500 Zeilen Code. Das macht das Handling alles andere als einfach.Wer programmiert, weiß, wie wichtig es ist, die grundlegende Regel "Don't repeat yourself" zu beachten - keine Wiederholungen, bitte! Im Widerspruch dazu wimmelt es in CSS nur so von Dopplungen. Aufwändig ist es auch, beispielsweise mehrere Seiten in unterschiedlichen Farbschemata auszuprobieren, da hilft nur Suchen und Ersetzen.Andererseits darf man von CSS nicht zu viel verlangen, es ist nun mal keine Programmiersprache. Und genau hier setzt LESS an und bessert nach. Es ist gewissermaßen ein um Programmieroptionen erweitertes CSS. LESS ist ein CSS-Präprozessor, das heißt, der LESS-Code wird ausgewertet und daraus der CSS-Code generiert.

LESS im Einsatz

LESS können Sie serverseitig oder clientseitig nutzen. Für die serverseitige Variante liegt LESS als NodeJS-Modul vor.Für die clientseitige Nutzung laden Sie die LESS-Javascript-Datei auf der Website des Projekts herunter und binden sie im Kopfbereich Ihrer Website ein:

<script src="less-1.2.1.min.js"
type="text/Javascript"></script>

Vor der LESS-Javascript-Datei muss das Stylesheet eingebunden werden. Um anzuzeigen, dass es LESS-Code enthält, benötigt es die Endung .less anstelle von .css. Wichtig ist außerdem bei rel die Angabe stylesheet/less.

<link rel="stylesheet/less" type=
"text/css" href="styles.less" />

Dann können Sie Ihr Stylesheet aufbauen. Das Schöne an LESS ist, dass es prinzipiell den normalen Syntaxregeln von CSS folgt. Sie können also auch ohne Weiteres ein normales Stylesheet einbinden und es wird funktionieren.

Variablen in LESS

LESS bietet aber nützliche Erweiterungen. Denn LESS ermöglicht die Definition von Variablen. Sinnvoll ist dies etwa für Farben, die im Laufe des Codes häufiger auftauchen.Die Variablennamen werden hierbei mit dem @-Zeichen gekennzeichnet, die Zuweisung eines Wertes erfolgt wie in CSS üblich mit einem Doppelpunkt.

@ci: #665B48;
@warnung: #F5AF2A;

Danach können Sie diese Variablen überall einsetzen:

h2 {
color: @ci;
background-color: @warnung;
}

Im erzeugten CSS-Code werden die Variablen durch die Werte ersetzt:

h2 {
color: #665b48;
background-color: #f5af2a;
}

© Internet Magazin

Tipp: Beim Experimentieren mit LESS ist es ratsam, sich parallel den erzeugten CSS-Code anzusehen. Das geht recht komfortabel beispielsweise über die Web Developer Toolbar. Wählen Sie hier CSS anzeigen im CSS-Menü (Strg+Umschalt +C). Alternativ geht es auch über Firebug.Zu einzelnen Elementen sehen Sie die Formatierungen im rechten Bereich unter Styles. Ein Klick auf den angezeigten Link zeigt das Stylesheet - in diesem Fall nicht mehr den LESS-Code, sondern das Ergebnis-Stylesheet.Wichtig ist, dass Sie bei Variablen den Code genauso angeben, wie er im Stylesheet erscheinen soll. Auf die folgende Art könnten Sie etwa eine Variable definieren, die die Schriftartenliste aufnimmt:

@serifenlos: "Lucida Sans Unicode",
"Lucida Grande", sans-serif;

Dabei müssen Sie die Anführungszeichen in der Schriftartenliste genau so angeben, wie sie im Stylesheet benötigt wird.

LESS: Klassen und Mixins

Wenn mehrere Deklarationen häufiger zusammen auftreten, so können Sie hierfür eine eigene Klasse definieren. Besonders praktisch ist das beispielsweise bei CSS3-Eigenschaften, die Sie mit herstellerspezifischen Präfixen angeben müssen, aber nicht jedes Mal per Hand eintippen wollen.Das folgende Beispiel erstellt eine Klasse, die einen Schatten festlegt. Im Beispiel ist der Schatten um 3 Pixel von oben und unten versetzt, der Grad der Verschwommenheit beträgt 10 Pixel, die Farbe ist grau. Für ältere Gecko- und Webkit-Browser benötigten Sie die Angabe mit den herstellerspezifischen Präfixen. Das ergibt folgenden Code:

.schattig {
-moz-box-shadow: gray 3px 3px 10px;
-webkit-box-shadow: gray 3px 3px
10px;
box-shadow: gray 3px 3px 10px;
}

Die Definition von Klassen funktioniert in LESS genauso wie in CSS. Die bekannte Syntax verlassen Sie aber, wenn Sie die Klasse einsetzen. Im Beispiel werden diese Formatierungen einem Element mit id="kopf" zugewiesen. Dafür schreiben Sie den Klassenselektor an die Stelle, wo Sie sonst CSS-Regeln angeben:

#kopf {
.schattig;
}

Im erzeugten Stylesheet werden anstelle des Textes .schattig die oben definierten Angaben geschrieben:

#kopf {
-moz-box-shadow: gray 3px 3px 10px;
-webkit-box-shadow: gray 3px 3px
10px;
box-shadow: gray 3px 3px 10px;
}

Da die Definition der Klasse .schattig gleichzeitig normaler CSS-Code ist, würde die Klassendefinition im Ergebnis-Stylesheet ausgegeben und dieses unnötig aufgebläht werden. Für eine reine LESS-interne Klasse, die nicht im Ergebnis-Stylesheet erscheint, ergänzen Sie leere runde Klammern bei der Klassendefinition:

.schattig () {
/* alles andere wie gehabt */
}

Tipp: Wenn Sie einen Syntaxfehler machen, zeigt Ihnen das LESS zuverlässig an - beispielsweise ein vergessenes Semikolon innerhalb einer Klassendefinition. Wenn Sie CSS-Angaben jedoch direkt falsch schreiben, meckert LESS nicht. Hier kann man aber auf die Fehlerkonsole von Firefox und ähnliche Tools zurückgreifen. Das Beispiel lässt sich jetzt über Parameter modifizieren.Angenommen, wir haben einen Standardschatten, den wir oft, aber nicht immer anwenden. Dann können wir mit Standardparametern arbeiten, die sich überschreiben lassen.Im Beispiel wird wieder ein Schatten definiert und über eine Variable in Klammern die Standardschattenart definiert:

.schattig2 (@angaben: red 3px 3px
10px) {
-moz-box-shadow:@angaben;
-webkit-box-shadow:@angaben;
box-shadow:@angaben;
}

Diese Klasse können Sie jetzt auf zwei Arten benutzen: Wenn Sie sie ohne weitere Parameter schreiben, dann werden die angegeben Werte übernommen:

h2 {
.schattig2;
}

Sie können aber in runden Klammern andere Werte angeben, die dann benutzt werden:

p {
.schattig2(green 3px 3px 10px);
}

Wieder wird hier der gesamte Code erzeugt, also die box-shadow-Eigenschaften mit allen notwendigen herstellerspezifischen Präfixen.

LESS: Noch flexibler mit Parameterlisten

Werden bei einer Eigenschaft mehrere Parameter angegeben wie bei box-shadow, können Sie auch mit einer Parameterliste arbeiten. Diese sprechen Sie über das Schlüsselwort @arguments an.

.schattig3 (@farbe: orange, @x: 0px,
@y: 10px, @blur: 10px ) {
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
box-shadow: @arguments;
}

Soll jetzt ein Schatten mit denselben Parametern, aber einer anderen Farbe erzeugt werden, so genügt es, Folgendes zu schreiben:

#kopf {
.schattig3(#000000);
}

Das generiert Ihnen den Code mit den herstellerspezifischen Präfixen:

#kopf{
-moz-box-shadow:#000000 0px 10px
10px;
-webkit-box-shadow: #000000 0px 10px
10px;
box-shadow: #000000 0px 10px 10px;
}

Apropos Mehrfachverwendung: LESS erlaubt einen modularen Code-Aufbau. Einzelteile können Sie auslagern und dann mit @import einbinden:

@import "bibliothek.less";

Dabei können Sie die Endung less auch weglassen:

@import "bibliothek";

Auf diese Weise lassen sich übrigens auch externe CSS-Dateien einbinden. Damit die @import-Direktive nicht im Ergebnis-Stylesheet erscheint, sondern der Code direkt eingebunden wird, müssen die Dateiendungen .css in .less umbenannt werden.

LESS: Verschachtelungen

Bei Selektoren setzt man oft auf Nachfahrenkombinatoren wie #nav ul oder Ähnliche. Gehen wir von folgender Navigationsstruktur aus:

<div id="nav"><ul><li><a href="#">Start</a></li><li><a href="#">Antworten</a></li><li><a href="#">Service</a></li></ul></div>

Bei der Formatierung der Navigationsleiste arbeitet man sich von außen nach innen vor, definiert also zuerst die Eigenschaften von #nav, dann die Eigenschaften der Nachfahren. Über den Selektor #nav ul formatieren Sie die ungeordnete Liste innerhalb von #nav, über #nav li die Listenpunkte der Navigation. Das kann beispielweise so aussehen:

#nav { overflow: hidden; width: 100%;
}
#nav ul { list-style: none; }
#nav li { float: left; padding: 2%;}
#nav a { color: #A8795E; text-
decoration: none; }
#nav a:hover { color: #737C88; }

Mit LESS können Sie die Verschachtelung der Elemente im Code widerspiegeln und ersparen es sich damit, umfassende Selektoren - im Beispiel #nav - immer wieder zu schreiben. Zu diesem Zweck geben Sie als Erstes die Formatierungen für das umfassende Element an. Dann schließen Sie die geschweifte Klammer jedoch nicht, sondern ergänzen den nächsten Selektor, der ein Nachfahre des umfassenden Elements ist.

#nav { overflow: hidden; width: 100%;
ul { list-style: none; }
li { float: left; padding: 2%; }
a { color: #A8795E; text-decoration:
none; }
a:hover { color: #737C88; }
}

Erst zum Schluss wird die geschweifte Klammer des umfassenden Elements geschlossen.Es gibt noch eine weitere Verkürzungsmöglichkeit für die Schreibweise der Formatierung bei den Links.

a {&:hover { }
}

Normalerweise verwendet LESS bei verschachtelten Regeln ein Leerzeichen zur Trennung der Selektoren im Ergebnis-Stylesheet. Das &-Zeichen bei &:hover sorgt dafür, dass der übergeordnete Selektor direkt daran gebunden wird. Das Ergebnis ist der Selektor a:hover.