Vereinfachte CSS Definitionen mit Less

Entwickelt man Web-Anwendungen mit CSS kann es schnell passieren, dass man den Wunsch nach Variablen oder Regel verspürt da man sonst gleiche Attribute mehrfach angeben muß.

Das Programm Less  kann hier helfen. In meinem Fall gab eine PHP Web Anwendung drei unterschiedlichen CSS Klassen vor, die ich aber mit einheitlichen Attributen versehen wollte. Im Normalfall bedeutet dies, dass man dreimal dieselben Definitionen ändern müsste. Das Vorgehen mit Less ist so:

1. Man schreibt in eine Datei (am besten mit der Endung .less) die Regeln
2. Dieses Regelwerk wird mit Less in eine normale CSS Datei umgewandelt
3. Diese CSS Datei wird im HTML eingebunden

1. Regeln

vi shop.less

.kleingedrucktes {
    color: #999999;
    font-size: 11px;
    font-weight: normal;
    margin: 0;
    padding: 0;
}

.vpe { .kleingedrucktes; }
.shippingtime {.kleingedrucktes}
.taxandshippinginfo {.kleingedrucktes}

2. Umwandeln

lessc < shop.less > shop-less.css

3. Normales CSS

vi shop-less.css
.kleingedrucktes{color:#999999;font-size:11px;font-weight:normal;margin:0;padding:0;}
.vpe{color:#999999;font-size:11px;font-weight:normal;margin:0;padding:0;}
.shippingtime{color:#999999;font-size:11px;font-weight:normal;margin:0;padding:0;}
.taxandshippinginfo{color:#999999;font-size:11px;font-weight:normal;margin:0;padding:0;}