In CSS gibt es standardmäßig keine Variablen! … doch damit möchten sich Alexis Sellier und Dmitry Fadeyev von Less.org nicht abfinden. Die beiden haben eine Möglichkeit erfunden, mit der sie Variablen in CSS verwenden können. Das ganze sieht dann ungefähr so aus:
@brand_color: #4D926F;
#header {
color: @brand_color;
}
h2 {
color: @brand_color;
}
Dadurch können Variablen, die an vielen Stellen in CSS benötigt werden, einmal definiert werden, und in der Folge an allen benötigten Stellen eingefügt werden. So ist es möglich z.B. die Hauptfarbe einer Webseite, die es i.a. in sehr vielen Elementen (und damit in sehr vielen CSS-Regeln) gibt, auf einen Schlag geändert werden.
Zusätzlich zu dieser Möglichkeit sind auch Funktionen in CSS möglich. Das ganze sieht dann so aus:
.rounded_corners (@radius: 5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
#header {
.rounded_corners;
}
#footer {
.rounded_corners(10px);
}
Wie man sieht entspricht der CSS-Style “.rounded_corners” einer überladenen Funktion, wodurch diese sehr vielfältig einsetzbar ist.
Die dritte große Säule von Less sind die sogenannten “Nested Rules”, d.h. Regeln, die die bisherigen langen css-Regeln ersetzen sollen:
#header {
color: red;
a {
font-weight: bold;
text-decoration: none;
}
}
Wer Less benutzen möchte muss die Less-Klasse: LessPHP in sein Projekt einfügen. Die Jungs von ajaxschmiede.de verwenden folgenden Code, um ihre Less-CSS-Dateien in echte CSS-Dateien zu konvertieren:
require 'lessc.inc.php';
try {
lessc::ccompile('input.less', 'out.css');
} catch (exception $ex) {
exit('lessc fatal error:
'.$ex->getMessage());
}
Zukunft:
Es ist geplant eine vollständige JavaScript-Umsetzung von Less in arbeit. Aktuell kann man sich die Entwicklerversion ansehen. Geplant ist dabei, dass alle technischen Möglichkeiten des modernen CSS3 & HTML5 eingesetzt werden können. Zum einbinden der JS-Dateien genügt folgender Aufruf:
Zu beachten ist das: rel=”stylesheet/less”, damit die LESS-Dateien geparst werden.
Kommentare