Less CSS: Vorstellung und Tutorial
Wer moderne Webseiten programmieren bzw. designen möchte, kommt an CSS nicht vorbei. Die Stylesheet-Sprache, die wie HTML zu den Kernsprachen des World Wide Webs zählt, ermöglicht es, Webseiteninhalte und deren grafische Darstellung sauber voneinander zu trennen. Auf diese Weise lassen sich Größen wie Layout, Farben oder Typografie jederzeit anpassen, ohne dass hierfür der gesamte Quellcode auf den Kopf gestellt werden muss. Je größer ein Webprojekt wird, desto komplexer und unübersichtlicher werden allerdings die Stylesheets, also die Dokumente, in denen die gestalterischen Informationen auf Basis von CSS aufgezeichnet sind – und damit auch die Arbeit mit der Websprache. Abhilfe schafft der CSS-Präprozessor Less.
Was ist Less?
Less (Leaner Style Sheets) ist eine rückwärtskompatible Spracherweiterung bzw. ein Präprozessor für die Stylesheet-Sprache CSS. Das bedeutet, dass jeder beliebige CSS-Code automatisch auch ein gültiger Less-Code ist (umgekehrt gilt dies jedoch nicht). Der Zweck von Less liegt darin, das Schreiben von CSS-Code effizienter zu gestalten, weshalb die von SASS beeinflusste Sprache verschiedene Erweiterungen zu den normalen CSS-Anweisungen wie Variablen und Funktionen bietet, die u. a. ein einfacheres Management der Stylesheets ermöglichen und mühsames Code-Duplizieren erübrigen.
Zur Anzeige dieses Videos sind Cookies von Drittanbietern erforderlich. Ihre Cookie-Einstellungen können Sie hier aufrufen und ändern. Als Alexis Sellier den CSS-Präprozessor 2009 veröffentlichte, war der Compiler für die Umwandlung von Less in CSS noch in der objektorientierten Programmiersprache Ruby geschrieben. Mittlerweile ist das JavaScript-Tool Less.js die Basis für die Stylesheet-Sprache sowie den Kompilierungsprozess, was den Vorteil hat, dass Less somit nicht nur serverseitig, sondern auch clientseitig (in Webbrowsern) kompiliert werden kann.
Less vs. CSS: Wo liegt der Unterschied?
Sowohl CSS als auch Less werden den Stylesheet-Sprachen zugeordnet. In beiden Fällen handelt es sich also um formale Sprachen, die das Erscheinungsbild von Benutzeroberflächen bzw. Dokumenten prägen. Hierfür müssen die Stylesheet-Dateien mit den gewünschten Gestaltungsanweisungen lediglich den HTML-Elementen einer Website zugeordnet werden – die Auswertung übernimmt der Browser. Der entscheidende Unterschied zwischen Less und CSS liegt dabei darin, dass CSS eine statische Sprache ist, während Less zu den dynamischen Sprachen zählt und somit auch dynamische Features wie Variablen, Operatoren, Funktionen, Mixins, Verschachtelungen bietet, die in CSS fehlen.
Während Anweisungen in CSS also nach einem festen Schema erfolgen müssen, bietet Less Entwicklern wesentlich flexiblere Möglichkeiten: So lassen sich z. B. individuelle Regeln für eine beliebigen Klasse von Elementen definieren, die für das gesamte Stylesheet gelten – auf diese Weise spart man mühsame Code-Wiederholungen. Folglich unterscheidet sich auch die Syntax der beiden Sprachen. Grundsätzlich lässt sich die Less-Syntax als Metasyntax von CSS einstufen, da gültiger CSS-Code immer auch valider Less-Code mit der gleichen Semantik ist.
Client- oder serverseitig: Wie funktioniert die Nutzung von Less?
Wenn Sie Less für Ihr Projekt verwenden möchten, haben Sie zwei Möglichkeiten: Sie nutzen entweder den Webbrowser Ihrer Wahl, um Ihre Less-Stylesheets mithilfe von Less.js clientseitig zu kompilieren, oder Sie installieren die JavaScript-Anwendung auf Ihrem Entwicklungsrechner und wandeln den Code dort mithilfe von Less.js und der JavaScript-Laufzeitumgebung Node.js über die Kommandozeile um.
Less CSS: Clientseitige Verwendung
Die clientseitige Nutzung von Less ist der einfachste und schnellste Weg für die Arbeit mit der Stylesheet-Sprache. Für die spätere Live-Umgebung ist diese Variante allerdings nicht zu empfehlen, da die zusätzliche Kompilierung von Less zu CSS mit klaren Performance-Einbußen für zugreifende Nutzer verknüpft wäre. In Browsern mit deaktiviertem JavaScript würden die Gestaltungsanweisungen darüber hinaus gänzlich wegfallen.
Um Less im Browser zu kompilieren, geben Sie zunächst im jeweiligen Dokument an, dass Sie Less-Stylesheets (also Stylesheets mit der Dateiendung .less) verwenden möchten. Hierfür binden Sie diese mithilfe des rel-Attributs „stylesheet/less“ ein:
<link rel="stylesheet/less" type="text/css" href="styles.less">Anschließend laden Sie die aktuelle Version von Less.js herunter, die beispielsweise im offiziellen GitHub-Verzeichnis des CSS-Präprozessors zu finden ist. Das JavaScript-Tool binden Sie dann im <head>-Bereich Ihres Projekts ein:
<script src="less.js" type="text/javascript"></script>Es ist wichtig, dass Sie zunächst das Stylesheet und erst dann das Skript einbinden. Andernfalls kann es zu Verarbeitungsproblemen kommen!
Serverseitige Verwendung von Less CSS
Auch auf dem Entwicklungsrechner ist Less schnell installiert und ebenso einfach ausgeführt. Dabei haben Sie hinsichtlich des Betriebssystems freie Auswahl: Der CSS-Präprozessor läuft unter Windows, macOS und UNIX/Linux. Voraussetzung ist, dass die bereits erwähnte JavaScript-Laufzeitumgebung Node.js installiert ist.
Laden Sie also zunächst die aktuelle Version für Ihr System auf der Node.js-Website herunter und installieren Sie diese. Mit npm, dem Paketmanager der JavaScript-Laufzeitumgebung, installieren Sie im Anschluss die Stylesheet-Sprache über die Kommandozeile:
npm install -g lessErstellte Less-Stylesheets können Sie nun jederzeit – ebenfalls über die Kommandozeile – kompilieren. Die Beispieldatei example.less lässt sich beispielsweise mit folgendem Kommando in eine CSS-Datei umwandeln:
lessc example.less example.cssLess-Tutorial: Die wichtigsten Less-Features anhand von Beispielen erklärt
Sich mit Less auseinanderzusetzen, lohnt sich für jeden, der regelmäßig mit CSS zu tun hat. Durch die Verwendung von Less hat man nicht nur den Vorteil, dynamisches Verhalten in seine Stylesheet-Codes einbauen zu können, sondern auch die Möglichkeit, eine Menge Zeit und Aufwand zu sparen. Natürlich gilt es hierfür zunächst, sich in die Eigenheiten der CSS-Erweiterung einzuarbeiten, denn um Stylesheets in Less schreiben zu können, müssen auch die erforderlichen syntaktischen Grundlagen bekannt sein. Im Rahmen dieses kleinen Less-Tutorials stellen wir Ihnen anhand praktischer Less-CSS-Beispiele die wichtigsten Features inklusive der jeweiligen Notation vor.
Variablen
Eine der größten Stärken von Less ist die Möglichkeit, wie in anderen Programmiersprachen Variablen zu erstellen. Diese können jegliche Art von Werten speichern, wobei vor allem solche Werte relevant sind, die Sie besonders häufig in Ihrem Stylesheet verwenden: So werden Variablen z. B. häufig dazu genutzt, um Farben, Fonts, Dimensionen (Größe, Höhe, Breite), Selektoren oder URLs sowie deren Abwandlungen (z. B. heller/dunkler etc.) zentral zu definieren. Die festgelegten Werte lassen sich dann an beliebiger Stelle im Stylesheet verwenden, sodass bei globalen Änderungen nur noch eine einzige Codezeile geändert werden muss.
Im folgenden Codeausschnitt sind beispielhaft zwei Variablen definiert – eine für die Hintergrundfarbe (@background-color), eine für die Textfarbe (@text-color). Beide enthalten Hexadezimal-Codes:
// Less
@background-color: #ffffff;
@text-color: #000000;
p{
background-color: @background-color;
color: @text-color;
padding: 15px;
}
ul{
background-color: @background-color;
}
li{
color: @text-color;
}Die Hintergrundfarbe – in diesem Fall Weiß – wird sowohl gewöhnlichen Textblöcken (p) als auch ungeordneten Auflistungen (ul) zugeordnet. Als Textfarbe ist Schwarz definiert, wobei diese für die Texte in den Textblöcken und auch für die Listenelemente (li) in den Auflistungen gelten soll. Möchte man an diesen Farbdefinitionen nun Änderungen vornehmen und beispielsweise weißen Text auf schwarzem Hintergrund für die Listen und Textabsätze vorgeben, brauchen Sie lediglich die Werte der beiden Variablen austauschen. In einem gewöhnlichen CSS-Sheet müssten die Werte für alle Elemente einzeln ersetzt werden. Nach der Kompilierung in CSS sieht der Code im Übrigen folgendermaßen aus:
/* CSS */
p{
background-color: #ffffff;
color: #000000;
padding: 15px;
}
ul{
background-color: #ffffff;
}
li{
color: #1A237E;
}Mixins
Das Prinzip von Mixins ähnelt dem von Variablen. Allerdings werden in diesem Fall nicht einzelne Werte, sondern ganze Klassen inklusive der darin deklarierten Werte zentral definiert, um diese im Anschluss jederzeit an andere Klassen im Less-Stylesheet zu vererben. Darüber hinaus können sich Mixins auch wie Funktionen verhalten und Parameter akzeptieren (auch mit Default-Werten). Ein Beispiel liefert folgendes Mixin für abgerundete Ecken (.rounded-corners), das sowohl der Kopf- (#header) als auch der Fußzeile (#footer) zugewiesen wird. Während für den Header der Vorgabewert übernommen wird, übergibt #footer dem Mixin einen eigenen Wert (10px):
// Less
.rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}Das kompilierte CSS zu diesen Less-Codezeilen sieht wie folgt aus:
/* CSS */
#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
Um Vererbungen zu erzeugen, müssen Sie in CSS aufwendige, lange Selektoren schreiben. In Less können Sie beliebig viele Selektoren ineinander verschachteln, was einerseits weniger Aufwand bedeutet und andererseits für eine klarere, übersichtlichere Struktur des Stylesheets sorgt. Auch diese Möglichkeit des CSS-Präprozessors soll anhand eines Beispiels verdeutlicht werden:
***CODE***
// Less
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p {
font-size: 12px;
a {
text-decoration: none;
&:hover {
border-width: 1px
}
}
}
}Die Selektoren p, a und :hover wurden in diesem Fall also im Less-Stylesheet gebündelt, was eine deutliche Vereinfachung zur Auszeichnung in einem CSS-Stylesheet darstellt. Das wird deutlich, wenn man sich das generierte CSS zu diesem Code-Beispiel anschaut:
/* CSS */
#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;
}Operatoren
Auch die arithmetischen Operationen Addition (+), Subtraktion (-), Multiplikation (*) und Division (/) lassen sich in Less-Stylesheets verwenden, indem der jeweilige Operator auf einen beliebigen Zahlen- oder Farbwert angewandt wird. Mit wenig Aufwand können Sie so komplexe Zusammenhänge zwischen den Werten verschiedener Elemente aufbauen, die auch bestehen bleiben, wenn sich die Grundwerte verändern. Sollte die Umwandlung durch einen Operator unmöglich bzw. nicht sinnvoll sein, wird dieser automatisch ignoriert – beispielsweise, wenn eine Zentimeter- mit einer Pixelangabe addiert werden soll. Folgendes Beispiel zeigt die Möglichkeiten von Operationen in Less:
// Less
@the-border: 1px;
@base-color: #111;
#header {
color: (@base-color * 3);
border-left: @the-border;
border-right: (@the-border * 2);
}
#footer {
color: (@base-color + #003300);
}Die Grunddefinitionen für Umrandungen (1px) und die Basisfarbe (#111), die einem Schwarzton entspricht, werden also auf die Kopf- und die Fußzeile angewandt, wobei drei Operatoren die Basiswerte manipulieren:
- Die Basisfarbe wird im Header mit 3 multipliziert. Ergebnis ist der Hex-Wert #333, hinter dem sich ein dunkler Grauton verbirgt.
- Der rechte Rahmen im Header erhält den Multiplikationsoperator * 2 und ist damit doppelt so breit wie der Standardrahmen (2px).
- Auch die Basisfarbe der Fußzeile wird durch einen Operator manipuliert. Hier wird der Hex-Wert #003300 zum Grundwert #111 addiert, wodurch die Fußzeile einen dunklen Grünton erhält (#114411).
Im kompilierten CSS-Code sind die Ergebnisse der Operationen ebenfalls zu bestaunen:
/* CSS */
#header {
color: #333;
border-left: 1px;
border-right: 2px;
}
#footer {
color: #114411;
}Funktionen
Less erweitert CSS außerdem um Funktionen, wobei das gesamte Spektrum an Möglichkeiten verfügbar ist: So können Sie in einem Less-Stylesheet einerseits komplexe logische Zusammenhänge mit der if- oder Booleschen Funktion abbilden oder nicht weniger komplexe Funktionen für mathematische Berechnungen wie Cosinus, Sinus oder Tangens nutzen. Andererseits sind auch einfache Funktionen zur schnellen Farbdefinition (rgb, rgba, hsv etc.) oder Funktionen mit Farboperatoren wie Kontrast (contrast), Sättigung (saturate bzw. desature) oder Helligkeit (lighten bzw. darken) möglich. Um beispielsweise die Sättigung eines Elements zu erhöhen bzw. zu verringern, benötigen Sie lediglich eine Farbangabe und die Funktion saturate. Per Prozentangabe (0–100%) geben Sie zudem an, wie stark die Sättigung verändert werden soll:
// Less
@red: #842210;
#header {
color: saturate(@red, 20%); ->#931801
}
#footer {
color: desaturate(@red, 10%); ->##7d2717
}In diesem Beispiel ist der dunkle Rot-Ton mit dem Hexadezimalcode #842210 im Less-Stylesheet definiert und als Farbe für Kopf- und Fußzeile eingetragen. Für die Kopfzeile soll allerdings eine Steigerung von 20 Prozent angewandt werden, während der Less-Code die Sättigung in der Fußzeile um 10 Prozent verringert. Im CSS-Stylesheet sind die Funktionen sowie die Farbvariable (@red) umgewandelt und daher nur die Hex-Codes mit der jeweiligen Sättigungsstufe zu sehen:
/* CSS */
#header {
color: #931801
}
#footer {
color: #7d2717
}Less CSS: Weniger Arbeit, mehr Möglichkeiten
Das kleine Einsteiger-Tutorial in Less hat nur einen Bruchteil der Möglichkeiten aufgezeigt, die den CSS-Präprozessor so wertvoll machen. Haben Sie Variablen, Mixins und Co. erst einmal definiert, können Sie diese jederzeit auf neue Elemente in Ihrem Stylesheet anwenden, ohne komplett bei null zu beginnen, wie es bei CSS-Code häufig der Fall ist. Verändern sich Werte wie der Basisfarbton, haben Sie dies in einem funktionierenden Less-Dokument außerdem mühelos mit wenigen Aktionen angepasst, was den CSS-Präprozessor auch bei der langfristigen Gestaltung des eigenen Webprojekts zu einem wertvollen Begleiter macht.
Detaillierte Informationen zu den einzelnen Less-Features finden Sie im In-Depth Guide auf lesscss.org.