LESS CSS

Schon seit geraumer Zeit kommt bei uns in der Entwicklung LESS, ein CSS Preprozessor zum Einsatz.
Ich möchte in folgendem Artikel kurz darauf eingehen, was die Vorteile von LESS
gegenüber gewöhnlichem CSS sind und wie LESS hilft, Projekte effektiv umzusetzen.

LESS ist als Erweiterung von CSS zu verstehen. Genauer gesagt hat man mit LESS die Möglichkeit Variablen, Mixins und Funktionen im CSS Code zu verwenden.
Es gibt mehrere third party tools mit denen man aus .less Dateien CSS generieren kann. Es besteht aber auch die Möglichkeit LESS clientseitig zu verwenden, dazu später mehr.

Durch die Möglichkeit im CSS Code Variablen verwenden zu können, können oft gebrauchte Werte einmal definiert und dann an verschiedenen Stellen eingesetzt werden.
Änderungen können so schneller durchgeführt werden und der Code ist übersichtlicher.

Hier ein einfaches Beispiel:

/* LESS CODE */

@bgColor: #996666

#header {
    background-color: @bgColor;
}

#footer {
    background-color: @bgColor;
}

Noch flexibler sind die so genannten Mixins. Der Unterschied zu Variablen ist der, dass bei Mixins ganze Klassen übergeben werden.
Wie bei Funktionen können auch bei Mixins Parameter mitgeschickt werden.

Hier ein kleines Beispiel:

/* LESS Definition eines Mixins */

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

Und so wird das ganze angewendet:

#header {
    .border-radius(6px);
}

.item {
    .border-radius; /* Hier wird der Standardwert aus unserem Mixin verwendet, also 3px */
} 

In LESS kann man neben dem gewohnten cascading auch nesting, also
das Verschachteln von Regeln anwenden.

Ein Beispiel macht klar worum es geht:

/* CSS CODE */

#content h1 {
    font-size: 30px;
}

#content p {
    font-size: 14px;
}

#content p a {
  text-decoration: none;
}
 
#content p a:hover {
  color: #ff0000;
} 

In LESS hätte man das so schreiben können:

#content {
    h1 {
        font-size: 30px;
    }
    p {
        font-size: 14px;
        a {
	text-decoration: none;
            &:hover {
                color: #ff0000;
            }
        }
    }
}

Wie man sieht, ist der Code ähnlich der DOM-Struktur im HTML Dokument. Das bedeutet weniger tippen und ein übersichtlicher Code.

Hinweis: Eine zu tiefe Verschachtelung macht allerdings aus Gründen der Übersichtlichkeit keinen Sinn. Mehr als drei, maximal vier Ebenen zu verschachteln ist deshalb zu vermeiden!

Auch das geht! In Zeiten von Responsive Web-Designs (also auf die jeweiligen Endgeräte angepasste Designs), ist die Möglichkeit Media Queries wie Selektoren zu verschachteln sehr interessant und nützlich.

/* LESS CODE */

#header {
    font-size: 24px;
    @media only screen and (max-width: 1024px) {
        font-size: 18px;
    }
    @media only screen and (max-width: 768px) {
        font-size: 12px;
    }
}

Dies ergiebt folgendes CSS:

#header {
  font-size: 24px;
}
@media only screen and (max-width: 1024px) {
  #header {
    font-size: 18px;
  }
}
@media only screen and (max-width: 768px) {
  #header {
    font-size: 12px;
  }
}

Um schnell loszulegen oder in der Entwicklungsphase kann LESS ohne weiteres clientseitig verwendet werden. Dazu benötigt man nur das less.js FIle welches man hier bekommt.
Die LESS Datei kann wie eine normale CSS Datei geladen werden, danach wir noch das JavaScript eingebunden:

Im Produktivbetrieb ist von Clientseitiger Anwendung aus Performancegründen abzuraten!

Am besten ist es die .less Dateien selbst zu kompilieren und das generierte CSS zu verwenden. Bewährte Third Party Apps sind zB. {less}.app, SimpLESS oder CodeKit.

Mit @import können, wie in normalem CSS auch, Dateien importiert werden. Man kann also alles in einer Hauptdatei zusammenfassen. Kompiliert wird dann diese Hauptdatei.

Folgendes Beispiel:

@import 'less/mixins.less';
@import 'less/header.less';
@import 'less/navigation.less';
@import 'less/content.less';
@import 'less/footer.less';
@import 'less/responsive.less';
@import 'less/ie.less';
 

CSS3 Eigenschaften mit Präfix wie -moz oder -webkit in Mixins zusammenfassen:

.box-shadow (@x: 0px, @y: 3px, @blur: 5px, @color: #333) {
    -webkit-box-shadow: @x @y @blur @color;
    -moz-box-shadow: @x @y @blur @color;
    box-shadow: @x @y @blur @color;
}

Einmal Angelegt können Mixins nach Belieben verwendet werden:

#header {
    .box-shadow(5px, 5px, 6px, #999);
}
.container {
    .box-shadow(2px, 2px, 4px);
}

Ein Tipp: Man findet im Web viele Mixin Libraries die sehr hilfreich sein können und viel Zeit sparen.