Als WebentwicklerIn kommt man schnell in den Genuss eines CSS-Pre-Prozessor, so auch ich in meinem Job als Frontend Developerin, bei dem wir LESS als CSS-Pre-Prozessor verwenden. In diesem Beitrag werden die ersten Grundzüge erklärt und nützliche Dos and Don’ts genannt, die man beim Entwickeln mit LESS oder anderen CSS-Pre-Prozessoren bedenken sollte.

LESS ermöglicht es, im CSS mit Variablen, Mixins, Berechnungen und Funktionen zu arbeiten. Es läuft sowohl Server-Seitig, mit Node.js und Rhino, als auch Client-Seitig auf modernen Browsern.

Variablen

Mit Variablen können oft verwendete Werte definiert werden und im CSS Code verwendet werden. Dadurch muss bei Änderungen nur noch eine Zeile geändert werden. In meinen Projekten setze ich Variablen vorallem bei Farbdefinitionen, Bildschirmbreiten usw. ein.

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header {
color: @light-blue;
}

Output

#header {
color: #6c94be;
}

Tipp: Falls man keine kreativen Namen für Farben erfinden möchte, eignet sich diese Seite: http://name-of-color.com/.

Mixins

Mixins ermöglichen es, eine Reihe von Eigenschaften aus einer CSS Klasse in eine andere CSS Klasse zu inkludieren. Es können natürlich auch #IDs als Mixins verwendet werden.

.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}



#menu a {
color: #111;
.bordered;
}

.post a {
color: red;
.bordered;
}

Versteckte Mixins

Möchte man ein Mixin erstellen, es aber nicht im generierten CSS Code ausgeben, so können Klammern hinter einem Mixin gesetzt werden, und diesesr wird nicht im CSS Code gesetzt. Tipp: Das ist eine Möglichkeit, dass ungenutzter CSS Code die CSS-Datei nicht unnötig groß macht.

.my-mixin {
color: black;
}
.my-other-mixin() {
background: white;
}
.class {
.my-mixin;
.my-other-mixin;
}
Output

.my-mixin {
color: black;
}
.class {
color: black;
background: white;
}

Mixins als Funktionen

Mixins können sich unter anderem wie Funktionen verhalten und akzeptieren dadurch auch Parameter. Dem Parameter kann ein Default-Wert gesetzt werden.

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

#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}
Output

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


Verschachtelungen

In LESS können Selektoren ineinander verschachtelt werden. Dadurch können lange Schreibweisen von Vererbungen vermieden werden. Allerdings sollten Selektoren nur sofern es notwendig ist, verschachtelt werden, da ansonsten der CSS-Selektor zu „stark“ werden könnte und kein Überblick mehr besteht.


#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
Output

#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}
Das &-Zeichen ist ein Platzhalter für das Elternelement. Dies ist besonders nützlich bei Pseudoklassen wie :hover oder :focus.

Extend

Extend ist eine Less-Pseudo Klasse, die den gesetzten Selektor mit dem referenzierten Selektor zusammenfasst. Dadurch kann im generierten CSS Code gespart werden, da die Datei unnötig groß werden könnte.

nav ul {
&:extend(.inline);
background: blue;
}
.inline {
color: red;
}
Output

nav ul {
background: blue;
}
.inline,
nav ul {
color: red;
}

Kommentare

In CSS sind nur Blockkommentare möglich /* Some Code */. Durch die Verwendung von LESS sind auch Inline-Kommentare möglich, allerdings werden diese im generierten CSS nicht mehr angeführt.

Quellen

http://lesscss.org/

http://www.lesscss.de/