LESS – CSS mit Superkräften
LESS erweitert CSS um Variablen, Verschachtelung und Mixins. Was damals revolutionär war, ist heute der Standard – und LESS war maßgeblich daran beteiligt.
Als CSS noch keine Variablen kannte und man Farben dutzendfach im Stylesheet wiederholen musste, kamen CSS-Präprozessoren wie LESS gerade recht. LESS erweitert CSS um Funktionen, die die Pflege großer Stylesheets erheblich vereinfachen – und die heute zum Teil sogar in nativem CSS angekommen sind.
Die wichtigsten LESS-Features
Variablen
Farben, Abstände und Schriftgrößen einmal definieren und überall verwenden:
@primary-color: #f49a00;
@font-size-base: 16px;
h1 { color: @primary-color; font-size: @font-size-base * 2; }
Verschachtelung
Selektoren logisch verschachteln statt flach und redundant schreiben:
.nav {
list-style: none;
li { display: inline-block; }
a {
color: @primary-color;
&:hover { text-decoration: underline; }
}
}
Mixins
Wiederverwendbare Stilblöcke – ähnlich wie Funktionen in einer Programmiersprache:
.border-radius(@radius: 4px) {
border-radius: @radius;
}
.button { .border-radius(8px); }
LESS vs. SASS/SCSS
Lange Zeit lieferten sich LESS und SASS ein Kopf-an-Kopf-Rennen. Heute hat sich SCSS als de-facto-Standard in der Branche durchgesetzt – auch weil Bootstrap ab Version 4 auf SCSS umgestellt hat. LESS ist aber weiterhin in Projekten aktiv, die es früh eingesetzt haben, und die Syntax ist für CSS-Kenner besonders leicht zu erlernen, da LESS näher an klassischem CSS bleibt.
Wer heute ein neues Projekt startet, greift meist zu SCSS – oder setzt gleich auf native CSS Custom Properties, die inzwischen in allen modernen Browsern verfügbar sind.
Artikel teilen
