Dynamische CSS-Dateien durch LESS

Dez

2011

0 Kommentare

Tim Sydekum

CSS, JavaScript, LESS

Schon oft habe ich mich geärgert, dass sich viele Werte in CSS ständig wiederholen, seien es Farbcodes oder Größenangaben, und man bei Änderungen immer die “Suchen und Ersetzen”-Funktion seines Editor bemühen muss. Mit LESS kann man seine Stylesheets nun dynamisch machen und Werte einmal global festlegen. Das funktioniert entweder auf Client-Seite per JavaScript oder bereits auf dem Server.

Variablen – CSS wird dynamisch

LESS erweitert CSS um dynamische Komponenten, wie Variablen, Operationen und Funktionen. Es läuft dabei entweder auf dem Server des Besuchers (ab IE 6+, Webkit-Browsern und Firefox) oder direkt auf dem eigenen Server.

Variablen können damit also einmal gesetzt und an verschiedenen Stellen des Stylesheets verwendet werden.

/* LESS */
@color: #4D926F;
 
#header {
    color: @color;
}
h2 {
    color: @color;
}
 
/* Kompiliertes CSS */
#header {
    color: #4D926F;
}
h2 {
    color: #4D926F;
}

/* LESS */
@color: #4D926F;

#header {
    color: @color;
}
h2 {
    color: @color;
}

/* Kompiliertes CSS */
#header {
    color: #4D926F;
}
h2 {
    color: #4D926F;
}

Mixins – CSS-Funktionen

Die sogenannten Mixins erlauben es, CSS-Klassen in andere Klassen einzubetten, indem einfach der Name der Klasse als Eigenschaft verwendet wird. Also ähnlich wie die Variablen, nur halt für eine gesamte CSS-Klasse. Mixins können sich auch wie Funktionen verhalten und Argumente übergeben, was man sonst nur aus Programmiersprachen wie PHP kennt.

/* LESS */
.rounded-corners (@radius: 5px) {
    border-radius: @radius;
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
}
 
#header {
    .rounded-corners;
}
#footer {
    .rounded-corners(10px);
}
 
/* Kompiliertes CSS */
#header {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}
#footer {
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

/* LESS */
.rounded-corners (@radius: 5px) {
    border-radius: @radius;
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
}

#header {
    .rounded-corners;
}
#footer {
    .rounded-corners(10px);
}

/* Kompiliertes CSS */
#header {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}
#footer {
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

Nested Rules – CSS-Klassen einfach verschachteln

Anstatt langer Selektoren-Namen, die Vererbungen festlegen, können mit den Nested Rules alle Selektoren einfach in die gewünschte Klassen geschrieben werden.

/* LESS */
#header {
    h1 {
        font-size: 26px;
        font-weight: bold;
    }
    p { font-size: 12px;
        a { text-decoration: none;
            &:hover { border-width: 1px }
        }
    }
}
 
/* Kompiliertes CSS */
#header h1 {
    font-size: 26px;
    font-weight: bold;
}
#header p {
    font-size: 12px;
}
#header p a {
    text-decoration: none;
}
#header p a:hover {
    border-width: 1px;
}

/* LESS */
#header {
    h1 {
        font-size: 26px;
        font-weight: bold;
    }
    p { font-size: 12px;
        a { text-decoration: none;
            &:hover { border-width: 1px }
        }
    }
}

/* Kompiliertes CSS */
#header h1 {
    font-size: 26px;
    font-weight: bold;
}
#header p {
    font-size: 12px;
}
#header p a {
    text-decoration: none;
}
#header p a:hover {
    border-width: 1px;
}

Funktionen und Operationen

Mit LESS können außerdem Operationen wie Addition, Subtraktion, Multiplikation und Division verwendet werden. Das funktioniert erstaunlicherweise nicht nur bei Größenangaben, sondern auch bei Farbwerten. Damit können komplexe Verbindungen zwischen Elementen hergestellt werden. Darüber hinaus können Werte auch noch durch JavaScript-Code manipuliert werden.

/* LESS */
@the-border: 1px;
@base-color: #111;
@red:        #842210;
 
#header {
    color: @base-color * 3;
    border-left: @the-border;
    border-right: @the-border * 2;
}
#footer {
    color: @base-color + #003300;
    border-color: desaturate(@red, 10%);
}
 
/* Kompiliertes CSS */
#header {
    color: #333;
    border-left: 1px;
    border-right: 2px;
}
#footer {
    color: #114411;
    border-color: #7d2717;
}

/* LESS */
@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
    color: @base-color * 3;
    border-left: @the-border;
    border-right: @the-border * 2;
}
#footer {
    color: @base-color + #003300;
    border-color: desaturate(@red, 10%);
}

/* Kompiliertes CSS */
#header {
    color: #333;
    border-left: 1px;
    border-right: 2px;
}
#footer {
    color: #114411;
    border-color: #7d2717;
}

LESS verwenden

Wird LESS auf Browser-Seite verwendet, muss lediglich die Stylesheet-Datei, gefolgt vom JavaScript im <head> der Website eingebunden werden.

1 2	<link rel="stylesheet/less" type="text/css" href="styles.less"> <script src="less.js" type="text/javascript"></script>

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

Die Installation auf dem Server erfordert schon mehr Erfahrung und setzt gewisse Serverrechte voraus.

LESS produktiv einsetzen

Die Möglichkeiten, die einem LESS bietet, sind ohne Frage hervorragend und hat sich sicher schon jeder Webentwickler mehr als einmal gewünscht. Hat man die Möglichkeit, LESS auf einem Server installieren zu können, steht einer Verwendung eigentlich nichts entgegen. Auf Client-Seite wird aber zwingend JavaScript benötigt, andernfalls bekommt der Besucher die reine HTML-Seite zu Gesicht. In einer Zeit in der man ohne JavaScript allerdings kaum noch auskommt, ist dies wohl zu verschmerzen. Wünschen würde ich mir, dass das W3C-Konsortium, dass für den CSS-Standard verantwortlich ist, einige dieser neuen Möglichkeiten endlich direkt festlegt. Schließlich handelt es sich dabei hauptsächlich um Erweiterungen, die nur von den Browsern unterstützt werden müssten.

Eine Übersicht aller Variablen, Mixins, Nested Rules, Funktionen und Operationen, sowie den Download findet man auf der LESS-Website.