less2go I – Installation und erste Beispiele

Heute soll es mal nicht um PHP gehen, sondern um LESS, einen Präprozessor für CSS. Während sich die PHP-Programmierung in den letzten Jahren stark verändert hat, hat sich am Arbeiten mit CSS wenig geändert. Klar, es gibt einige neue Eigenschaften, aber die Art, wie man CSS schreibt, ist immer noch die selbe geblieben. Und hier setzt nun LESS an.

Installation

LESS benötigt Ruby, was aber keine Probleme bereiten sollte; der RubyInstaller für Windows erledigt seine Arbeit deppensicher. Ist Ruby einmal installiert, ist LESS nur noch einen Befehl entfernt. Der nötige Befehl lautet gem install less

Kompilieren

Ähnlich einfach wie die Installation ist auch das Kompilieren der less-Dateien. Benötigt wird wieder nur ein Befehl: lessc layout.less
Mit diesem Befehl wird die LESS-Datei layout.less in die CSS-Datei layout.css umgewandelt.

LESS schreiben

  • Variablen
  • Mixins
  • Mixin-Funktionen
  • Verschachtelung (folgt im zweiten Teil)
  • Operatoren (folgt im zweiten Teil)
  • Echte Funktionen (folgt im zweiten Teil)
  • Namespaces (folgt im zweiten Teil)
  • Scope (folgt im dritten Teil)
  • Kommentare (folgt im dritten Teil)
  • Importieren (folgt im dritten Teil)
  • Escaping (folgt im dritten Teil)

Jetzt wo LESS installiert ist, können wir beginnen, LESS zu schreiben. Eines der wichtigsten Features von LESS sind Variablen. Die Syntax ist dabei selbsterklärend.

@bg-color: #555555;

#header { background-color: @bg-color; }

ergibt kompiliert

#header { background-color: #555555; }

Mithilfe der Variablen können wir nur Werte wiederverwenden. Es kann aber auch nötig sein, eine oder mehrere Eigenschaften wiederzuverwenden. Hier hilft uns, dass jede Definition in LESS wiederverwendbar ist. Besonders nützlich ist dies z.B. bei der border-radius Eigenschaft

.rounded {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
#header {
    background-color: #555; 
    .rounded;
}

ergibt kompiliert

.rounded {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
#header {
    background-color: #555; 
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

Wen die erzeugte .rounded Klasse stört, der kann sie mit zwei Zeichen in eine mixin-Funktion verwandeln und so verstecken:

.rounded() {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
#header {
    background-color: #555; 
    .rounded;
}

Kompiliert bleibt nun nur noch der #header Teil über:

#header {
    background-color: #555; 
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

Damit aber nicht genug, es gibt auch die Möglichkeit, Parameter zu übergeben und sogar Standard-Werte zu definieren:

.rounded(@radius: 5px) {
    border-radius: @radius;
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
}

#header {
    .rounded(7px);
}

#footer {
    .rounded;
}

Kompiliert ergibt dies dann

#header {
    border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
}

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

Bei den mixin-Funktionen fehlt jetzt nur noch ein Feature, dass ebenfalls aus diversen Programmiersprachen bekannt sein sollte, die arguments Variable. Ich denke auch hier ist ein Code-Beispiel die einfachste Möglichkeit der Erklärung:

.bordered (@color: red, @style: solid, @width: 5px) {
    border: @arguments;
} 

Die arguments Variable macht also nichts anderes, als die übergebenen Parameter aneinanderzureihen.

Fazit

Ich hoffe ich konnte euch einen ersten Eindruck in die Welt von LESS geben. Im einer Woche widmen wir uns dann unter anderem Operatoren und der Verschachtelung von Befehlen.

Schreibe einen Kommentar

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