Webseiten Planen Entwickeln und Pflegen

Beim erstellen umfangreicher Webseiten mit eigenen HTML und CSS Frameworks ist es wünschenswert mit Variablen zu arbeiten. So könnte man in einer Einstellungsdatei alle Maße und Farben angeben und somit einfach das Erscheinungsbild einer Webseite anpassen.

Genau dies bietet LessCSS. Lesscss ist eine kombination aus .less Dateien und JavaScript das daraus dann die CSS Dateien generiert. Dies kann zu Laufzeit passieren, oder die CSS Datei(en) werden per Compiler erstellt.

Der Vorteil liegt in der einfachen Anpassung einer Webseite an neue Designvorgaben. So kann sehr schnell das gesamte Layout verändert werden, die Farben ersetzt und Spaltenmaße, Schriftgrößen, Schriftarten in einer zentralen Konfigurationsdatei abgeändert werden.

// Variable für Links
@linkColor:         #0069d6;
@linkColorHover:    darken(@linkColor, 15);
// Farben
@black:             #000;
@grayDark:          #444444;
@gray:              lighten(@black, 50%);
@grayLight:         lighten(@black, 75%);
@grayLighter:       lighten(@black, 90%);
@white:             #fff;
@antrazit:            #28373c;
@hellblau:            #f0f3f9;

Außerdem ist es möglich Berechnungen anzustellen um bestimmte Variablen automatisch zu generiern.

@extraSpace:        (@gridGutterWidth * 2); // For our grid calculations
@siteWidth:         (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

Die Funktion calc in CSS3 bietet zwar auch die Möglichkeit, nur wird sie derzeit noch wenig von den Browsern unterstützt. LessCSS macht dies aber über JavaScript und ist somit unabhängig vom Browserversionen.
Das Einbinden ist denkbar einfach. So wird eine .less Datei über den normalen Header Link eingebunden:

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

Dann ist noch das less.js notwendig, das die Umrechnung in CSS erledigt:

<script src="less.js" type="text/javascript"></script>

Die styles.less Datei wird aufgerufen und alle notwendigen weiteren css Dateien nachgeladen. Dies benötigt nur unwesentlich mehr Zeit als die herkömmliche Einbindung eine CSS Frameworks wie z.B. YAML.
Eingebunden können beliebig viele Dateien werden. So kann man sich für bestimmte Anforderungen (Shop,Forum, Gästebuch usw.) die css Anweisungen aufteilen.
Nach der Fertigstellung der Seite kann man sich diese Dateien mit den enthaltenen Variablen fest kompilieren und eine statische CSS Datei daraus erstellen, was die Ladezeit natürlich verbessert.

Weitere Informationen gibt es unter http://lesscss.org/