CSS schreiben mit LESS

11. November 2011

LESS ist eine Erweiterung zu CSS und ermöglicht einem viele praktische Abkürzungen im eigenen Code.
Vor allem bietet es Variablen, was für Farbwerte von enormen Nutzen ist. Auch Klassen kann man erstellen um z.B. im weiteren CSS nur noch .borderRadius(2px) zuweisen zu müssen um anschließend den gesamten Code, inklusive der nötigen Vendor-Prefixes, zu erhalten.

Eine Klasse

Erstellung

.borderRadius(@radius){
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
    border-radius: @radius;
}

ihre Zuweisung

.element {
    .borderRadius(5px);
}

und die Ausgabe

.element {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

Auch die gesamte Kaskadierung wird einem enorm erleichtert.
So kann ich Regeln für meinen Container zuweisen und anschließend einfach auch allen Elementen innerhalb dieses Container Regeln zuweisen auf eine Art und Weise die meiner Meinung nach nicht nur praktischer sondern auch viel schöner lesbar ist. Allerdings muss man hier auch aufpassen, den Code nicht unnötig aufzublähen, denn wenn eine bestimmte Klasse sowieso nur in meinem Container vorkommt, macht es natürlich keinen Sinn den Container Selektor vorne dran zu hängen.

Kaskadierung in LESS

.element {
    attribut: wert;
    .child {
        attribut: wert;
        &:hover {
            attribut: wert;
        }
    }
}

wird zu

.element {
    attribut: wert;
}
.element .child {
    attribut: wert;
}
.element .child:hover {
    attribut: wert;
}

In der Praxis schaut das folgendermaßen aus. Ich bearbeite in Coda nicht mehr ein CSS sondern eine .less Datei.
Hierzu habe ich einen Code-Clip, in dem alle gängigen Klassen angelegt sind, wie abgerundete Ecken, Verläufe, Schatten, Transitions und Transforms. Da die Klassen im kompilierten CSS nicht auftauchen, muss man sich keine Gedanken machen ob man Sie alle braucht.
Im Hintergrund läuft der LESS-Compiler und erzeugt jedes mal wenn ich mein Dokument speicher automatisch eine CSS Datei. In den meißten Compilern kann man zusätzlich noch angeben ob das CSS in einem anderen Ordner als das LESS File landen und ob es minimiert werden soll.
Ich war lange (und bin es eigentlich nach wie vor) zufrieden mit LESS.app von Bryon Jones, benutze aber seit kurzem CodeKit vom gleichen Entwickler, dass noch einiges mehr kann.

Alles in Allem kann einem LESS einiges an Arbeit abnehmen und sorgt dabei noch dafür, dass der Code gut lesbar bleibt.
Man muss aber aufpassen, dass man nicht unnötig stark kaskadiert.

Alle Artikel

Dies ist ein sehr alter Blog. Die Artikel werden weiter unter ihrer URL verfügbar gehalten. Man sollte aber davon ausgehen, dass ein Großteil der Informationen, Links und Tipps veraltet sind.