Captain Obvious

LESS ist eine Stylesheet-Sprache entwickelt von Alexis Sellier, die das Arbeiten mit CSS erleichtern soll. Bisher stand ich dem immer etwas skeptisch gegenüber, weil ich dachte “Pah, CSS ist doch schon total einfach. Könnte übersichtlicher sein, aber ansonsten sehe ich den Sinn in LESS nicht.” Dann habe ich es doch mal ausprobiert und war sofort begeistert.

Der größte Nutzen oder zumindest das, was man auf den ersten Blick ohne sich viel mit LESS beschäftigt zu haben sehen kann, sind die Variablen. Man kann an jeder Stelle Variablen defininieren und einsetzen, was nützlich ist, wenn man Farbwerte oder Größenangaben an verschiedenen Stellen nutzt oder auch, wenn man bestimmte Werte ändern muss. Das kann zum Beispiel auf ein WordPress-Theme zutreffen, bei dem man den Nutzer die Abmessungen in den Theme Options einstellen lassen möchte.

Zusätzlich kann LESS CSS-Files übersichtlicher machen und dabei helfen, dass man sie besser verwalten kann. Ich gruppiere Elemente im CSS meistens sinnvoll und schreibe vor jeden Abschnitt als Kommentar, was nun folgt, aber auch das kann bei mehreren tausend Zeilen unübersichtlich werden und dazu führen, dass man bei Änderungen lange suchen muss, bis man alles gefunden hat.

Wie funktioniert LESS?

Es gibt zwei Möglichkeiten. Bei beiden erstellt man das Stylesheet als .less-Datei, nicht als .css. Die Datei kann vor dem Hochladen in eine CSS-Datei umgesetzt werden, es gibt aber auch Möglichkeiten, die .less-Dateien hochzuladen, die dann übersetzt werden, zum Beispiel durch die less.js-Bibliothek oder das WordPress-Plugin wp-less.

Grundfunktionen von LESS

Man definiert zum Beispiel seine Hauptfarbe, die immer wieder vorkommt, am Anfang des Dokuments und setzt an jeder Stelle die Variable ein. So reicht eine Änderung, falls man die Farbe überall wo sie vorkommt ändern möchte.

@main-color:#f00; //LESS-Variablendefinition
 
 
//Ab hier CSS mit der Variable statt Farbwerten.
body{background:@main-color;}
a:hover{color:@main-color;}

usw.

LESS erlaubt auch einfache mathematische Operatoren. So kann man am Anfang die Gesamtbreite definieren und später einzelne DIVs in Abhängigkeit davon angeben. Das erspart einzelne Änderungen, wenn sich die Breite der Seite ändert, wenn z.B. ein zweites Layout für eine mobile Ansicht angegeben wird.

@fullwidth:960px
@imagefolder: 'images/';
@icons-subfolder: 'socialicons/';
 
#content{
   width:@fullwidth/3; //ergibt: width: 320px
   background: url('@imagefolder+@icons-subfolder/iconxy.jpg') no-repeat; //ergibt images/socialicons/iconxy.jpg
}

Möchte man mehrere Operationen zusammenfügen (@fullwidth *2/3), ist es sinnvoll, Klammern zu setzen. Auch, wenn es zu Missverständnissen kommen könnte, beispielsweise bei negativen Abständen (padding: 5px 3px 7px -12px;)
Möchte man hier statt zwei Angaben eine Subtraktion ausführen, sollte (muss?) eine Klammer gesetzt werden, also
padding:5px 3px (7px-12px);

Schreibarbeit sparen mit nested blocks

ul.menu li a{font-size:14px}
ul.menu li .first{font-weight:bold}

Kommt euch sowas bekannt vor? LESS spart euch hierbei Arbeit und macht das alles übersichtlicher:

ul.menu li{
   a{font-size:14px;}
   .first{font-weight:bold;}
}

Mixins

Durch Mixins kann man die Eigenschaften einer Klasse komplett in eine andere kopieren. Mixins können auch wie echte Funktionen agieren und Argumente entgegennehmen.

(Beispiel von Wikipedia)

.rounded-corners (@radius: 5px) { //@radius wird als Argument übergeben, Standardwert ist 5px
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}
 
#header {
  .rounded-corners;
}
 
#footer {
  .rounded-corners(10px);
}

Das erzeugte CSS sieht folgendermaßen aus:

#header {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
#footer {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

Bei #header wird einfach der komplette .rounded-corners-Block mit dem Standardwert eingefügt, #footer ruft .rounded-corners(10px), weshalb für @radius 10px und nicht 5px eingefügt wird.

Hinweis: mit @arguments kann man alle übergeben Argumente ausgeben. Beispiel:

.foo(@bar, @bla, @blubb){
   color:@arguments;
   background:@arguments;
}

Wenn .foo() jetzt mit drei Argumenten ( .foo(x, y, z) ) aufgerufen wird, werden die drei Argumente überall eingefügt, wo “@arguments” steht.

So, das soll für eine kleine Einführung erstmal genügen, für eine komplette Übersicht sollte man die Dokumentation konsultieren.

LESS ist eine Stylesheet-Sprache entwickelt von Alexis Sellier, die das Arbeiten mit CSS erleichtern soll. Bisher stand ich dem immer etwas skeptisch gegenüber, weil ich dachte “Pah, CSS ist doch...