Do more with LESS
Eigentlich ist LESS ja ein alter Hut und im Web finden sich mehr Beiträge darüber welchen Präprozessor man verwenden soll, als ob überhaupt einer verwendet werden sollte. Das ist eine gute Sache, weil unabhängig für welchen Präprozessor man sich entscheidet, die Arbeit mit CSS erheblich erleichtert wird.
Man erkennt schon nach wenigen Minuten die Vorteile, die einem z.B. durch den Einsatz von LESS geschenkt werden. Man kann viel strukturierter und auf Komponentenbasis CSS-Dateien erstellen (lassen). Hierfür muss man sich nur an eine einfache und schnell zu erlernende Syntax gewöhnen. Aber auch ohne die Syntax zu beherrschen kann man schon valides LESS schreiben, denn CSS ist ebenfalls valider LESS-Code. CSS wird also nur durch viele hilfreiche Funktionen erweitert.
Ein paar Beispiele zum Anheizen
Variablen: Mit Variablen hat man die Möglichkeit Werte, die an verschiedenen Stellen benötigt werden, an einer Stelle zu definieren. Dadurch kann mit einer Änderung der Wert für alle verwendeten Bereiche verändert werden. Was aber viel cooler ist, ist das man mit Variablen rechnen kann. Man kann sich also Höhen und Breiten oder aber auch Farbwerte ausrechnen.
LESS:
1: @padding10: 10px;
2:
3: .page{
4: padding: @padding10;
5: }
6: .menu{
7: padding-left: @padding10 + 5px;
8: }
CSS:
1: .page{
2: padding: 10px;
3: }
4: .menu{
5: padding-left: 15px;
6: }
Mixins: Mixins helfen dabei redundante CSS-Anweisungen zu eliminieren indem man den redundanten Part einfach als Mixin schreibt und an den gewünschten Stellen verwendet. Ein gutes Beispiel dafür sind die Browser Prefixe von manchen CSS-Properties. Wie das aussieht zeigt folgendes Codebeispiel:
LESS:
1: .backface-hidden {
2: -moz-backface-visibility: hidden;
3: -webkit-backface-visibility: hidden;
4: backface-visibility: hidden;
5: }
6:
7: .menu{
8: .backface-hidden;
9: position: fixed;
10: top: 0px;
11: }
12:
13: .sidemenu{
14: .backface-hidden;
15: position: fixed;
16: right: 0px;
17: bottom: 0px;
18: }
CSS:
1: .backface-hidden {
2: -moz-backface-visibility: hidden;
3: -webkit-backface-visibility: hidden;
4: backface-visibility: hidden;
5: }
6:
7: .menu{
8: -moz-backface-visibility: hidden;
9: -webkit-backface-visibility: hidden;
10: backface-visibility: hidden; position: fixed;
11: top: 0px;
12: }
13:
14: .sidemenu{
15: -moz-backface-visibility: hidden;
16: -webkit-backface-visibility: hidden;
17: backface-visibility: hidden; position: fixed;
18: right: 0px;
19: bottom: 0px;
20: }
“Vererbung”: Mit der “Vererbung” kann man viel natürlicher eine CSS-Klassen Hierarchie abbilden. Dies geschieht indem man die zugehörigen CSS-Klassen einfach innerhalb der gewünschten CSS-Klasse definiert. Was ich damit meine zeigt das nachfolgende Beispiel. Dadurch ist die Zugehörigkeit klar ersichtlich und es ist wesentlich übersichtlicher durch die Einrückungen.
LESS:
1: .menu {
2: list-style: none;
3: position: fixed;
4:
5: & > li {
6: display: inline;
7: color: #ffffff;
8: }
9:
10: .link{
11: color: orange !important;
12: font-weight: bolder;
13: }
14: }
CSS:
1: .menu {
2: list-style: none;
3: position: fixed;
4: }
5: .menu .link {
6: color: orange !important;
7: font-weight: bolder;
8: }
9: .menu > li {
10: display: inline;
11: color: #ffffff;
12: }
Module: Des Weiteren kann man andere LESS-Dateien über die @import “path/to/lessfile.less”; importieren und so kleine übersichtliche Module von bestimmten Bereichen erstellen und diese in einer globalen Datei importieren. Damit lässt sich eine CSS-Datei erzeugen, die alle anderen Styles beinhaltet.
Das LESS eine gute Sache ist, erkennt man auch daran, dass man es in den Windows Web Essentials findet. Durch die Installation der Web Essentials, wird automatisch der Compiler für LESS (aber auch für SASS) mitinstalliert. Dadurch muss man sich nicht erst irgendwelche Kommandozeilen Tools oder sogar Ruby installieren, sondern kann in seiner gewohnten Umgebung arbeiten.
Durch die Integration in Visual Studio gibt es nun also keine Ausrede mehr, LESS oder SASS nicht zu verwenden! 
.
Fazit
Ich hoffe ich konnte diejenigen, die bisher nichts von LESS oder SASS gehalten haben, oder es noch nicht kannten, davon überzeugen auf jeden Fall mal einen tieferen Blick darauf zu werfen. Am Ende erleichtern diese Tools einem nämlich die Arbeit. Das ich in diesem Artikel mehr auf LESS eingegangen bin, hat nix damit zu, dass LESS besser als SASS ist. SASS kann das gleiche was LESS kann und sogar noch mehr und erzeugt in vielen Fällen intelligenteres CSS. Ich wollte nur aufzeigen, dass man selbst schon durch die Verwendung von LESS sein CSS wesentlich besser strukturieren kann.
Wer sich einarbeiten will findet nachfolgend diverse Links zu den Themen LESS und SASS sowie ein paar Vergleiche der beiden.