Stand: 07.12.2018

In diesem Kapitel geht es um Werkzeuge, die das Arbeiten an Webseiten erleichtern. Wir stellen hier derzeit lediglich Less vor.

Less ist ein Werkzeug, das die Arbeit mit CSS etwas erleichtert. Man kann es sich als erweitertes CSS vorstellen.

10.1 Less

Sie können sich auf der Less-Homepage zunächst einen Überblick verschaffen. Less ist eine Art erweitertes CSS. Statt einer CSS-Datei arbeiten Sie an einer LESS-Datei. Diese Datei wird dann von entsprechenden Werkzeugen in eine ganz normale CSS-Datei übersetzt.

10.1.1 Grundprinzipien

Less bietet drei wichtige Erweiterungen für CSS an:

Wir schauen uns jedes Feature separat an. Erst im Anschluss beschäftigen wir uns mit der Frage, wie man denn den Less-Code einbindet.

Variablen

In Less kann man Variablen benutzen, um häufige Angaben zentral zu speichern. Eine häufige Anwendung ist das Speichern von Farben, die ja an verschiedenen Stellen (Flächen und Schrift) zur Anwendung kommen. Bei Änderung des Farbschemas muss man in CSS immer verschiedene Stellen anpassen, was natürlich auch leicht zu Fehlern führt.

Variablen in Less werden mit einem @ markiert und wie folgt verwendet:

@hintergrund: #000;
@schrift: yellow;
@spezial: red;

body {
  background-color: @hintergrund;
  color: @schrift;
}

h1 {
  color: @spezial;
}

Bei der Umwandlung von Less in CSS werden diese Varialben einfach überall eingesetzt.

Verschachtelung

Wenn Sie in CSS stylen, dann definieren Sie häufig Regeln für einen bestimmten Bereich, z.B. für das Hauptmenü in nav. Dann haben Sie eine Reihe von Regeln, hier nur ein kleines Beispiel:

nav h1 {
  font-size: 90%;
}

nav a {
  text-decoration: none;
  color: blue;
}

Um die Zusammengehörigkeit zu kennzeichnen und somit die weitere Arbeit zu erleichtern, können Sie Verschachtelung anwenden:

nav {

  h1 {
    font-size: 90%;
  }

  a {
    text-decoration: none;
    color: blue;
  }

}

Sie können natürlich auch noch weiter (tiefer) verschachteln. Bei der Umwandlung von Less in CSS werden wieder viele Einzelregeln (wie oben) erzeugt.

Zu beachten ist der Umgang mit Pseudoelementen, also z.B. a:hover. Hier muss bei Verschachtelung ein Verweis auf das umgebende Element mit & eingefügt werden.

Beispiel:

a:hover {
  color: red;
}

a:visited {
  color: grey;
}

wird zu

a {
  &:hover {
    color: red;
  }

  &:visited {
    color: grey;
  }
}

Das Zeichen & ist generell ein Verweis auf das umgebende Element (auch: Elternelement).

Mixins

Mixins sind im Grunde so etwas wie Funktionen, die also ein Stückchen CSS-Code auslagern, so dass es wiederholt verwendet werden kann. Zusätzlich kann man diese Codeteile parametrisieren.

Ein typisches Beispiel ist folgender (CSS-)Code:

#box1 {
     -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
       -o-border-radius: 4px;
          border-radius: 4px;
}

#box2 {
     -moz-border-radius: 21px;
  -webkit-border-radius: 21px;
       -o-border-radius: 21px;
          border-radius: 21px;
}

Hier wollen wir runde Ecken erzeugen. Die vielen Eigenschaften sind Sicherheitsmechanismen, um ältere Browser anzusprechen, die das Feature border-radius noch nicht in der Form implementiert haben.

Um uns die vier Zeilen bei jedem Vorkommen zu ersparen, definieren wir ein Mixin mit einem Parameter (für den Kurvenradius):

.myradius (@radius: 4px) {
     -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
       -o-border-radius: @radius;
          border-radius: @radius;
}

Sie sehen, dass wir dem Mixin einen Namen geben .myradius und einen Parameter @radius und übrigens auch einen Standardwert 4px für den Fall, dass kein Parameter beim Aufruf übergeben wird.

Wir können den ursprünglichen Code dann in Less so formulieren:

#box1 {
  .myradius;
}

#box2 {
  .myradius(21px);
}

Auch hier werden die Aufrufe bei der Umwandlung in CSS durch den Code in der Mixin-Definition ersetzt, so dass ein CSS resultiert, das so aussieht wie unser Ausgangspunkt oben.

10.1.2 Einbinden

Ein Browser kann LESS nicht verstehen, sondern nur CSS. Also muss Ihre LESS-Datei umgewandelt werden. Die Frage ist: wo wird diese Umwandlung vollzogen?

Client-seitig einbinden

Die bequemste Möglichkeit, LESS einzubinden, ist, die Umwandlung dem Client zu überlassen, also dem Browser desjenigen, der die Seite angefordert hat. Das nennt man auch Client-seitige Einbindung:

Client-seitige Einbindung von LESS

Dazu müssen wir dem Browser allerdings eine Umwandlungssoftware (= Compiler) mitgeben - in Form einer JavaScript-Bibliothek. Diese nennt sich less.js. Man kann sie z.B. bei GitHub runterladen.

In der HTML-Datei muss man sowohl die Less-Datei als auch den Compiler "less.js" verlinken:

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>

Diese Methode hat den Vorteil, dass Sie jederzeit Ihre LESS-Datei ändern können, ohne sich Sorgen zu machen, ob die Änderung auch im CSS erscheint. Da die LESS-Datei bei jedem Aufruf der Seite von jedem Client neu übersetzt wird, wird auch jede neue Änderung immer berücksichtigt.

Die Methode hat aber auch klare Nachteile: Die Methode ist erstens unökonomisch. Jeder Browser muss die LESS-Datei erneut umwandeln. Doch eigentlich müsste man die LESS-Datei doch nur dann, wenn Sie vom Webseitenbetreiber geändert wird, einmal in CSS umwandeln. Selbst derselbe Browser, der die Seite zum zweiten Mal lädt, muss die LESS-Datei nochmal umwandeln. Zweitens erfordert die Methode eine externe Bibliothek auf der Client-Seite, die jedesmal an den Browser des Clients geschickt wird und damit - z.B. auf mobilen Endgeräten - wertvolle Bandbreite verschluckt. Das ist, als ob man eine Seite eigentlich auf englisch darstellen will - stattdessen verschickt man sie auf deutsch und schickt jedesmal ein Wörterbuch mit.

Das bringt uns zur zweiten Möglichkeit, LESS einzubinden.

Server-seitig einbinden

Die zweite (und sinnvollere) Möglichkeit, LESS einzubinden, ist es, auf dem Server die Umwandlung von LESS zu CSS durchzuführen, und immer nur die CSS-Datei zu schicken. Das nennt man auch Server-seitige Einbindung (der Server ist Ihr Rechner):

Server-seitige Einbindung von LESS

Zu beachten ist hier, dass Sie jedesmal, wenn Sie die LESS-Datei ändern, die Umwandlung erneut durchführen müssen.

Das heißt, in der HTML-Datei ist die Einbindung wie mit 'normalen' CSS-Dateien:

<link href="css/style.css" rel="stylesheet">

Sie benötigen hier keine JavaScript-Bibliothek, die Sie dem Client mitgeben.

Sie müssen aber auf Ihrem Rechner einen Compiler haben, mit dem Sie die Umwandlung durchführen können. Also installieren Sie einen Less-Compiler auf Ihrem Rechner (= Server). Dieser Compiler heißt lessc (das "c" steht für Compiler) und kann mit Node.js installiert werden (bzw. mit dem npm, dem Node Package Manager). Besuchen Sie die Node.js-Webseite, um Node.js zu installieren.

Haben Sie Node.js installiert, können Sie folgendes eingeben:

npm install -g less

Das -g steht für "global" und heißt, dass Sie anschließend das Less in allen Verzeichnissen ausführen können.

Hinweis: Es kann sein, dass Sie nicht als Admin auf Ihrem Konto arbeiten. Dann hilft es ein sudo davor zu packen, um nur für dieses Kommando als "super user" (su) tätig zu sein.

sudo npm install -g less

Sie müssen anschließend noch Ihr Passwort eingeben.

Haben Sie die Installation erfolgreich vollzogen, können Sie den Compiler lessc benutzen, um Ihre Datei style.less in eine CSS-Datei namens style.css zu übersetzen:

lessc style.less style.css

Wie Sie sehen, müssen Sie sowohl den Namen der LESS-Datei als auch den Namen den neuen CSS-Datei angeben.

10.2 Übung

Schauen Sie sich die folgende Seite an: Homepage.

Es handelt sich um die vereinfachte Startseite dieses Skripts. Laden Sie sich aus dem Browser sowohl die HTML-Seite als auch die CSS-Datei runter und vereinfachen Sie die CSS-Datei mit Hilfe von LESS.

Die HTML-Seite bekommen Sie mit Rechtsklick auf den Link oben und "Ziel speichern unter...". Die CSS-Datei bekommen Sie, wenn Sie sich den Quelltext im Browser anschauen und dort auf den Link zur CSS-Datei klicken.