CSS wie es sein sollte: Less-PHP

Ein interessantes Tool, mit dem ich auch diese Seite zusammengeschraubt habe und das ich schon länger mal vorstellen wollte hört auf den irreführenden Namen Less-PHP. Irreführend insofern, weil es eigentlich nur PHP nutzt, an sich aber eine schöne Möglichkeit bereitstellt, CSS zu erzeugen. Der geht auf ein anderes Projekt zurück, welches es schon länger gibt, nur Less heißt, aber eben nicht PHP nutzt.

Mit Less-PHP lassen sich innerhalb von CSS Variablen nutzen, Style-Eigenschaften verschachteln und vererben.

Less-Code Erzeugter CSS-Code
@color1: #000;
@bordered {
    border: 1px solid @color1;
}
p {
    font-family: serif;
    a {
        @bordered;
        :visited {
            color: #f00;
        }
}
p {
    font-family: serif;
}
p a {
    border: 1px solid #000;
}
p a :visited {
    color: #f00;
}

Dieses kurze Beispiel zeigt die wesentlichen Funktionen: In Zeile 1 wird eine Variable definiert, die anschließend überall im Code verwendet werden kann. In der zweiten Zeile wird etwas wie eine anonyme Klasse definiert, die verschiedene Eigenschaften haben kann. Wird das in ein Element integriert (wie in Zeile 8), so gehen alle Eigenschaften in dieses Element über. Man kann statt „@“ auch einfach „.“ oder „#“ nutzen, wenn man die Eigenschaften auch für eine Klasse oder ID nutzen will. Man kann es dann trotzdem wie in Zeile 8 mittels .bordered; integrieren.

In Zeile 7 sieht man schön das Prinzip der Verschachtelung. Man definiert, wie ein <a> im Kontext eines <p> auszusehen hat. Selbiges geht anschließend auch mit :visited.

Viele weitere tolle Eigenschaften wie beispielsweise Rechenoperationen oder das Importieren anderer Less-Dateien sind auf den Dokumentationsseiten des Projektes beschrieben.

Einbindung

Die Einbindung ist recht einfach. Um es mit dem Beispiel der Dokuseite zu sagen:

require 'lessc.inc.php';
try {
    lessc::ccompile('input.less', 'out.css');
} catch (exception $ex) {
    exit('lessc fatal error:'.$ex->getMessage());
}

Bibliothek laden, Less-Datei und Ausgabedatei festlegen – fertig. Angeblich ist die Sache sogar recht effizient, da die Bibliothek merkt, ob sich seit der letzten Kompilierung in der Ausgangsdatei verändert hat. Ich persönlich kommentiere es dennoch einfach aus, wenn ich nicht am Design arbeite. Oder man umgeht die Code-Ausführung ohnehin schon, indem man auf Caching-Mechanismen in der Seite setzt.