CSS Variablen, benutzerdefinierte Eigenschaften

Das W3C hat vor ein paar Tagen (27.06.2013) den Entwurf zu den CSS Custom Properties for Cascading Variables Module Level 1 aktualisiert.

Es soll bald möglich sein, benutzerdefinierte Eigenschaften verwenden zu können. Man könnte hier auch von Variablen sprechen. Wie das funktionieren soll? Wer LESS oder SASS kennt, hat diese Funktionalität ja schon, ich noch nicht; Variablen in CSS.

Beispiel-CSS:

:root {
var-color-scheme-background-dunkel: #000;
var-color-scheme-background-hell: #ccc;
var-color-scheme-schrift-auf-dunkel: #fff;
var-color-scheme-schrift-auf-hell: #000;
}

p.dunklerHintergrund {
color: var(color-scheme-schrift-auf-dunkel);
background: var(color-scheme-background-dunkel);
}

Mittels var-* (prefix, durch Voranstellen der Vorsilbe) definierst Du dir (quasi) eine eigene (nutzerdefinierte) Eigenschaft. Den Wert der Eigenschaft kannst du dann in deinem folgenden css-file durchgängig abrufen.

Vorteil, einmal gesetzte Variablen können immer wieder abgerufen werden, eine Änderung eines Wertes muss dann nur einmal vorgenommen werden. Toll zum Beispiel bei Farbvariationen eines Layouts. Cool, he? Da freu ich mich doch drauf!