Ajaxschmiede.de

LESS ist eine Erweiterung der bestehenden CSS-Definitionen und beinhaltete alle existierenden Formatierungen. Im Unterschied zu CSS beherrscht LESS jedoch den Umgang mit Variablen, erweiterten Klassen, Funktionen und eingebetteten Regeln. Und das ist echt cool.

Hier gleich ein paar Anwendungsbeispiele:

//Variablen
@main_color: #2266bb;

h1 {
 color: @main_color;
}

// erweiterte Klassen
.rounded_corners (@radius: 5px) {
 -moz-border-radius: @radius;
 -webkit-border-radius: @radius;
 border-radius: @radius;
}

#header {
 .rounded_corners;
}

.main_table {
 .rounded_corners(10px);
}

// eingebettete Regeln
#header {
 color: red;
 a {
 font-weight: bold;
 text-decoration: none;
 }
}

// Funktionen
@border-width: 1px;
@base-color: #333333;

#header {
 color: @base-color * 3;
 border-left: @border-width;
 border-right: @border-width * 2;
}

.main_table {
 color: (@base-color + #111) * 1.5;
}

Um LESS zu nutzen bedarf es einer Anwendung, die den LESS-Code in normales CSS umwandelt. Dies kann man beispielsweise über die PHP-Klasse lessphp tun, die ich persönlich auch einsetze. Dies sieht dann in etwa so aus:

require 'lessc.inc.php';

try {
lessc::ccompile('input.less', 'out.css');
} catch (exception $ex) {
exit('lessc fatal error:<br />'.$ex->getMessage());
}

Doch Alexis, der Entwickler von LESS, hat noch etwas viel genialeres vor. Derzeit arbeitet er an einer Javascript-Implementierung von LESS, die LESS-Code zur Laufzeit im Browser im normales CSS konvertiert – und dies in beeindruckender Geschwindigkeit. Damit entfällt das vorherige Parsen weg. Der Browser generiert selbst den CSS-Code. Dabei nutzt Alexis alle Möglichkeiten moderner Browser wie HTML5 und Local Storage voll aus.

Noch befindet sich LESS.js in Arbeit und wurde noch nicht freigegeben. Einen Eindruck der Arbeit kann man sich aber bereits jetzt beim Testen der Entwicklerversion holen.

Zum Einbinden von LESS.js ist folgender HTML-Code nötig (main.less stellt die LESS-Datei da):

<link rel="stylesheet/less" href="/stylesheets/main.less" type="text/css" />
<script src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script>