Less ist eine CSS-Präprozessorsprache. Sie erweitert CSS um Funktionen wie Variablen, Mixins und Methoden. Dadurch lässt sich CSS besser warten, thematisieren und erweitern.

Less läuft auf Node, im Browser und auf Rhino. Im Netz gibt es viele Drittanbieter-Tools zum Kompilieren des Less-Quellcodes.

Beispiel:

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
  -webkit-box-shadow: @style @c;
  box-shadow:         @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

Kompilierungsergebnis

.box {
  color: #fe33ac;
  border-color: #fdcdea;
}
.box div {
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

Less läuft über npm auf der Kommandozeile. Im Browser laden Sie es als Skriptdatei. Außerdem ist es in viele Drittanbieter-Tools integriert. Siehe Verwendung.

Installation

Auf dem Server installieren Sie Less am einfachsten über npm, den Paketmanager von node.js. Das geht so:

$ npm install -g less

Kommandozeilenverwendung:

Nach der Installation rufen Sie den Less-Compiler auf der Kommandozeile auf, wie folgt:

$ lessc styles.less

Das Programm gibt den kompilierten CSS-Code aus anstdoutSie leiten die Ausgabe in eine Datei um:

$ lessc styles.less > styles.css

Für komprimiertes CSS fügen Sie die Option-x hinzu. Für eine bessere Komprimierung verwenden Sie zusätzlich --clean-cssDie Option aktiviert Clean CSS zur Komprimierung.

Führen Sie lessc ohne Argumente aus. Das Programm gibt dann eine Liste aller verfügbaren Optionen auf der Kommandozeile aus.

Verwendung im Code

Rufen Sie den Less-Compiler im Code wie folgt auf (Node-Plattform).

var less = require('less');

less.render('.class { width: (1 + 1) }', function (e, css) {
  console.log(css);
});

Die Ausgabe lautet:

.class {
  width: 2;
}

Sie können auch den Parser und den Compiler manuell aufrufen:

var parser = new(less.Parser);

parser.parse('.class { width: (1 + 1) }', function (err, tree) {
  if (err) {
    return console.error(err)
  }
  console.log(tree.toCSS());
});

Konfiguration

Sie können dem Compiler mehrere Argumente übergeben:

var parser = new(less.Parser)({
  paths: ['.', './lib'], // Specify search paths for @import directives
  filename: 'style.less' // Specify a filename, for better error messages
});

parser.parse('.class { width: (1 + 1) }', function (e, tree) {
  tree.toCSS({
    // Minify CSS output
    compress: true
  });
});

Tools von Drittanbietern

Sehen Sie sich den Abschnitt Verwendung für Details zu Tools von Drittanbietern an.

Rhino-Kommandozeile

Jede Version von less.js enthält auch eine rhino-compatible Version.

Die Kommandozeilen-Version für Rhino benötigt die folgenden zwei Dateien:

• less-rhino- .js - Kompilierung und Ausführung,
• lessc-rhino- .js - Kommandozeilen-Unterstützung

Führen Sie die Kompilierung auf der Kommandozeile aus:

java -jar js.jar -f less-rhino-<version>.js lessc-rhino-<version>.js styles.less styles.css

Der Befehl kompiliert die Datei styles.less und speichert sie als styles.css. Das Argument für die Ausgabedatei ist optional. Ohne dieses Argument gibt less standardmäßig auf die Standardausgabe aus (stdout）。

Verwendung im Client

less.js im Browser auszuführen ist praktisch für die Entwicklung. Für die Produktionsumgebung ist das nicht empfohlen.

Die Verwendung von Less.js im Client ist die einfachste Methode und in der Entwicklungsphase praktisch. In der Produktionsumgebung sind Leistung und Zuverlässigkeit entscheidend. Verwenden Sie deshalb node.js oder andere Tools von Drittanbietern für die Vorkompilierung.

Legen Sie los und fügen Sie der Seite den.less Link zum Stylesheet hinzu und setzen Sie das rel Attribut auf "stylesheet/less":

<link rel="stylesheet/less" type="text/css" href="styles.less" />

Laden Sie danach less.js herunter und binden Sie es über das<script></script> Tag ein. Platzieren Sie es im<head> Element der Seite:

<script src="less.js" type="text/javascript"></script>

Hinweise

• Stellen Sie sicher, dass Ihr Stylesheet vor less.js geladen wird.
• Wenn Sie mehrere.less Stylesheet-Dateien laden, wird jede Datei separat kompiliert. Variablen, Mixins oder Namespaces aus einer Datei sind deshalb in anderen Dateien nicht zugreifbar.

Browser-Optionen

Definieren Sie vor<script src="less.js"></script> ein globales less Objekt. Damit setzen Sie Parameter für Less.js :

<!-- set options before less.js script -->
<script>
  less = {
    env: "development",
    async: false,
    fileAsync: false,
    poll: 1000,
    functions: {},
    dumpLineNumbers: "comments",
    relativeUrls: false,
    rootpath: ":/a.com/"
  };
</script>
<script src="less.js"></script>

Mehr zu Browser-Optionen

Download für den Browser

bower install less

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.3/less.min.js"></script>

Less.js wird unter der Apache-2-Lizenz veröffentlicht (eine Doppellizenz ist für die Zukunft geplant). Copyright 2009-2014, Alexis Sellier und das Less-Kernteam (siehe oben). Zusammenfassung:

Die vollständigen Copyright-Informationen zu Less.js finden Sie im Projekt-Repository.