CSS Metasprache – Do more with Less

Man, so einen bescheuerten Satz wollte ich schon immer mal schreiben. „Do more with Less“-ich komme mir vor wie ein ganz großes MarketingGenie. Dennoch, Less ist ein feines Tool für Webdesigner, denn es hilft die Unzulänglichkeiten von CSS ganz erheblich zu verringern.

Machen wir uns nichts vor, CSS ist zwar eine tolle Erfindung aber eine beschissene deklarative Sprache für Stilvorlagen. Selbst mit viel Sorgfalt und Dokumentation gelangt man irgendwann an den Punkt, wo man innerhalb seiner CSS Dokumente (die bei manchen Projekten eine beeindruckende Länge erreichen können) einfach den Überblick verloren hat. Von der Wartbarkeit des Codes möchte ich gar nicht erst anfangen, denn wer sich in die CSS Angaben eines Anderen einarbeiten muss (so wie ich bei dem WordPress Theme das ich nutze), der weiß: diese Stunden hätte man auch besser verbringen können.

Less ist eine Obermenge von CSS. Es fügt der Syntax einige Features hinzu. So kann man beispielsweise Variablen deklarieren, parametrisierte Funktionen erstellen, einfache arithmetische Operationen ausführen und – das schönste – die Dokumentstruktur im CSS Code wiedergeben. Man glaubt gar nicht was so eine kleine Änderung an Übersicht erzeugt.

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
  box-shadow:         @style @c;
  -webkit-box-shadow: @style @c;
  -moz-box-shadow:    @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box { 
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

Bevor ich aber selbst hier in die vielfältigen Möglichkeiten eintauche, möchte ich das Less Tutorial von Tutsplus.com empfehlen, das noch weitaus umfangreicher und verständlicher ist als die Webseite und Dokumentation von Less selbst. Zum Einstieg eignet sich Get into less – the programmable stylesheet language ganz hervorragend und einige weitere Anregungen findet man unter Practical tips for using less.

Während der Entwicklung eines Webseitendesigns werde ich zukünftig also stark auf Less setzen. Ist das Design dann jedoch erstmal fertig, sollte man es vermeiden Less weiterhin einzusetzen. Schließlich handelt es sich um ein weiteres Javascript was eingebunden und ausgeführt werden muss und somit den Seitenaufbau verlangsamt. Dem kann man jedoch mit Winless und anderen Tools begegnen. Winless konvertiert die fertige Designdeklaration automatisch in eine Standard-CSS Datei, die man dann prima auf seiner Webseite einbinden kann.

Fazit:

Nie wieder ohne Less!

Kolja Engelmann

Technikfan, Freizeitprogrammierer, selbsternannter Toolking und vermutlich größter Drachenfan Deutschlands blogged hier die Lösungen zu IT-Problemen die ihm über den Weg laufen, kleine Softwaretools, nostalgische Anfälle und missbraucht das Ganze gern auch mal als privates Tagebuch und Fotoalbum.

Das könnte dich auch interessieren …

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert