Jun 29

LESS.js – CSS mit Variablen und Funktionen

Tag: jQueryPatrick @ 6:15 pm

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>

4 Antworten zu “LESS.js – CSS mit Variablen und Funktionen”

  1. revierphone-micha sagt:

    Sieht sehr interessant aus und wird vielen Entwicklern einiges an Arbeit ersparen.

  2. Sina sagt:

    Hallo, ich habe less schon eingebaut und es funktioniert einwandfrei (mit less.js). In einigen Projekte zerschießt das Layout sobald ich ein Variable verwende (Bsp: background:@headerColor; )
    Kann es an Prototype.js liegen?!

    Grüße,
    Sina

  3. Benny sagt:

    @Sina ja, das kann theoretisch sein. Habe mit Prototyp generell eher schlechte Erfahrungen gemacht. Probiere es doch mal mit jQuery. Oder spricht etwas dagegen?

    Für alle, die mit Ruby arbeiten und gerne ein “gepimptes” CSS serverseitig möchten, kann ich außerdem noch Sass (http://sass-lang.com/) empfehlen :)

  4. Donki sagt:

    Danke für deinen Artikel. Ist für mich als Anfänger auch leicht zu verstehen gewesen.

Hinterlasse einen Kommentar