LESS ist eine Stylesheet-Sprache, die entwickelt wurde, um das Schreiben von Stylesheets effektiver zu machen. Hauptziele sind dabei, intelligente Steuerungen zu ermöglichen sowie Code-Wiederholungen zu vermeiden. LESS ist eine Obermenge der Stylesheet-Sprache CSS, das heißt, jede gültige CSS-Style-Anweisung ist auch eine gültige LESS-Anweisung. LESS wird in reines CSS kompiliert.

Geschichte

Die Sprache wurde von Alexis Sellier (auch bekannt als Cloudhead) entwickelt und im Jahr 2009 veröffentlicht.

Eigenschaften

Zusätzlich zu den normalen CSS-Anweisungen bietet LESS die Schachtelung von Regeln, wodurch Code-Wiederholungen vermieden werden können. Beispielsweise können einer (bestehenden oder vom Programmierer festgelegten) Klasse von Elementen Regeln zugewiesen werden.

Des Weiteren bietet LESS Variablen, die wie z. B. die Konstanten in Java zentral festgelegt werden und sodann an mehreren Stellen benutzt werden können. In Abhängigkeit von diesen Variablen können auch Berechnungen und Verzweigungen durchgeführt werden. Außerdem unterstützt LESS Mixins: damit können Regeln unter einem Namen zusammengefasst und mit diesem an mehreren Stellen eingefügt werden, um so möglichst effektiv Code-Wiederholungen zu vermeiden.

Kompilierung

Da LESS in Javascript geschrieben ist, kann es nicht nur server-, sondern auch clientseitig (im Webbrowser) kompiliert werden. Ein Vorteil der clientseitigen Kompilierung für Entwickler ist, dass Änderungen am Quellcode mit Hilfe des Watch mode automatisch im Webbrowser aktualisiert werden. Dies kann Zeit bei der Entwicklung sparen.

Codebeispiele

Variablen
Mit Variablen ist es möglich, oft verwendete Werte (z. B. Farben) an mehreren Stellen zu verwenden sowie ihre Abwandlungen (z. B. heller/dunkler, blasser (erdiger), im Farbwinkel gedreht) intelligent zu nutzen.

@meineFarbe: #143352;
 
#header {
  background-color: @meineFarbe;
}
h2 {
  color: @meineFarbe;
}

Wird das ganze nun kompiliert, erhalten wir folgendes Ergebnis:

#header {
  background-color: #143352;
}
h2 {
  color: #143352;
}

Mixins
In Mixins können mehrere Eigenschaften definiert werden, welche anschließend – ähnlich wie Variablen – Verwendung finden. Zudem können wir Parameter übergeben.

.rund (@radius: 4px) {
     -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
       -o-border-radius: @radius;
          border-radius: @radius;
}
#header {
  .rund;
}
#footer {
  .rund(21px);
}

Kompiliert sieht das so aus:

#header {
     -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
       -o-border-radius: 4px;
          border-radius: 4px;
}
#footer {
     -moz-border-radius: 21px;
  -webkit-border-radius: 21px;
       -o-border-radius: 21px;
          border-radius: 21px;
}

Verschachtelung
Hiermit besteht die Möglichkeit, Selektoren ineinander zu verschachteln. Somit muss man weniger tippen und reduziert zusätzlich das Risiko von Tippfehlern:

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

Dies wird kompiliert zu

#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;
}

Quelle: Wikipedia (http://de.wikipedia.org/wiki/LESS_Stylesheet-Sprache)