LESS is more – effizient mit dem CSS Präprozessor LESS arbeiten.

1289824_10201582112542373_410685008_nSeit nun etwas mehr als einem Jahr arbeite ich mit dem CSS Präprozessor LESS – Zeit für ein kurzes Review.

CSS Was??

CSS Präprozessor! Das ist eine Software, welche eine Stylesheet-Sprache in CSS übersetzt und dabei dem Entwickler idealerweise das Arbeiten erleichtert. Es gibt inzwischen etliche mehr oder weniger ausgereifte Präprozessoren (u.a. Sass oder Turbine – eine gute Zusammenstellung findet ihr hier: http://www.catswhocode.com/blog/8-css-preprocessors-to-speed-up-development-time), LESS schien mir bei der Entscheidung am besten in mein Setup zu passen und hat mich auf Anhieb angesprochen. Ich möchte hier auch gar nicht auf andere Tools eingehen und Vergleiche aufstellen, sondern euch LESS näherbringen und zeigen, wie mein Arbeiten damit effizienter geworden ist.

Was LESS kann und was es nicht kann

LESS hat dieselbe Syntax wie CSS, jedoch einen deutlich grösseren Funktionsumfang. Somit ist also jede gültige CSS-Anweisung auch eine gültige LESS-Anweisung – LESS ist also eine Obermenge von CSS. [1]. LESS unterscheidet sich von klassischem CSS durch seine überaus mächtigen Erweiterungen. Auf einige dieser Erweiterungen werde ich im Folgenden eingehen. Eine komplette Feature-Liste befindet sich auf der Projekt-Seite [2] und hier auch in Deutsch [3].

Variablen

Globale Änderungen von CSS-Eigenschaften können recht aufwändig werden. LESS hat deshalb Variablen eingeführt, mit welchen häufig verwendete Werte definiert und überall im Dokument verwendet werden können. So wird der Code deutlich wartbarer und übersichtlicher. Hierzu ein Beispiel, bei welchem eine Farbe als Variable definiert wird:

grafik-variablen

Mixins

Mixins sind den Variablen sehr ähnlich, jedoch fassen sie mehrere CSS Eigenschaften in eine Klasse zusammen. Die Eigenschaften dieser Klasse können dann komplett an eine andere weitergegeben werden. Ein Mixin kann zusätzlich auch Parameter akzeptieren und verhält sich so wie eine Funktion. Ein Beispiel dazu:

grafik-mixins

Verschachtelung

CSS-Selektoren können enorm lang und unübersichtlich werden. LESS löst das Problem mit Verschachtelung. So wird die Struktur des Codes klarer und wartbarer. Auch hierzu ein Beispiel:

grafik-verschachtelung

Funktionen und Operatoren

Ein weiteres, sehr mächtiges Feature von LESS sind Funktionen und Operatoren. So lassen sich Werte wie Grössenangaben und Farben addieren, subtrahieren, dividieren oder multiplizieren. Komplexe Abhängigkeiten lassen sich so einfach und übersichtlich realisieren. Eine ausführliche Referenz zu LESS-Funktionen befindet sich auf der offiziellen Projekt-Seite [3].

1-zeilige Kommentare

Während bei klassischem CSS Kommentare immer geöffnet und geschlossen werden müssen, bietet LESS auch die Möglichkeit von 1-zeiligen Kommentaren, welche nicht abgeschlossen werden müssen. Die üblichen CSS-Kommentare bleiben im kompilierten CSS-File erhalten, währen die 1-zeiligen Kommentare im fertigen CSS nicht angezeigt werden.

Was LESS nicht kann

Natürlich hat auch LESS seine Fehler und Macken. Eine Problem- und Fehlerübersicht findet Ihr unter [4] (Englisch). Wichtig ist – auch wenn es offensichtlich scheint – einzusehen, dass euch LESS nicht das Styling übernimmt, sondern lediglich helfen möchte, euer Styling effizienter zu coden. LESS macht euch also nicht zu besseren Designern!

Mit LESS effizienter arbeiten

Nun kennen wir also all die schönen Features von LESS! Bleibt nun nur noch zu klären, wie man konkret damit arbeitet. Ich arbeite meistens mit dem Standard-Setup, welches vom Hoster bereitgestellt wird. Das heisst konkret PHP & MySQL. Als Editor verwende ich Sublime Text 2 [5] und als FTP-Client WinSCP [6]. WinSCP ist so konfiguriert, dass ich Textfiles (lokale und die auf dem Server) in Sublime Text bearbeiten kann. Das erspart mir den manuellen Datenupload.

Bei meinen Websites unterscheide ich grundsätzlich zwischen Live-Betrieb und Entwicklungs-Modus. Daher integriere ich LESS auch auf 2 verschiedene Arten. Im Entwicklungs-Modus arbeite ich mit dem offiziellen LESS Javascript-Compiler [2] und lasse die LESS-Files client-seitig im Browser kompilieren. less.js bietet den wunderbaren «Watch mode». Mit diesem werden Änderungen in LESS-Files automatisch erkannt und neu kompiliert. So kann man also am Styling der Website arbeiten, ohne die Page andauernd neu laden zu müssen! Sehr mächtig!

Für den Live-Betrieb verwende ich den PHP-LESS Compiler [7]. Auch dieser Compiler kann Änderungen automatisch erkennen und kompilieren. Die kompilierten Stylesheets werden dann serverseitig gecached, sodass sie nicht bei jedem Reload der Website kompiliert werden.

Code-mässig sieht das Ganze folgendermassen aus:

<?php if($mode == 'development'){ ?>
   <link rel="stylesheet/less" type="text/css" href="/pfad/zu/stylesheet.less"/>
   <script type="text/javascript">
        less = {};
        less.env = 'development';
    </script>
    <script src="/pfad/zu/less.js" type="text/javascript"></script>
    <script type="text/javascript">less.watch();</script>
<?php } else {
    require_once('/pfad/zu/lessc.inc.php');
    autoCompileLess('/pfad/zu/stylesheet.less', '/pfad/zu/stylesheet.css');
    echo '<link type="text/css" rel="stylesheet" href="/web/style/css/main.css"/>';
} ?>

Die autoCompileLess-Funktion sieht wie folgt aus: [8]

function autoCompileLess($inputFile, $outputFile) {
    // load the cache
    $cacheFile = $inputFile.".cache";
    if (file_exists($cacheFile)) {
        $cache = unserialize(file_get_contents($cacheFile));
    } else {
        $cache = $inputFile;
    }
    $less = new lessc;
    $newCache = $less->cachedCompile($cache);
    if (!is_array($cache) || $newCache["updated"] > $cache["updated"]) {
        file_put_contents($cacheFile, serialize($newCache));
        file_put_contents($outputFile, $newCache['compiled']);
    }
}

Einmal das System aufgesetzt, muss ich mich so also nicht mehr um die Kompilierung der LESS-Daten kümmern. Das wird alles komplett automatisch erledigt, so dass ich mich voll und ganz um das Schreiben der Stylesheets kümmern kann.

Fazit

LESS bietet also verschiedene tolle Funktionen, welche das Schreiben von Stylesheets sehr viel effizienter machen können. Mit den richtigen Compilern – richtig eingesetzt – können zusätzliche Kompilier-Arbeiten vollständig automatisiert ausgeführt und der Funktionsumfang gar um ein Liveupdate der Stylesheets erweitert werden. So lässt sich die Effizienz beim Schreiben von Stylesheets massiv erhöhen.

Wie schaut’s bei euch aus? Arbeitet ihr auch mit CSS Präprozessoren? Wenn ja, welche nutzt ihr? Wie sieht euer Setup aus? Habt ihr Tipps, wie man LESS noch effizienter betreiben kann?

Ich freue mich auf eine spannende Diskussion.

Quellnachweise

[1] http://de.wikipedia.org/wiki/LESS_(Stylesheet-Sprache)
[2] http://www.lesscss.org/
[3] http://www.lesscss.de/
[4] https://less.tenderapp.com/discussions/problems
[5] http://www.sublimetext.com/2
[6] http://winscp.net/
[7] http://leafo.net/lessphp/
[8] http://leafo.net/lessphp/docs/#compiling_automatically

2 Gedanken zu „LESS is more – effizient mit dem CSS Präprozessor LESS arbeiten.

    1. DanielDaniel Artikelautor

      Der Javascript-Compiler ist mit allen gängigen Browsern kompatibel (sofern Javascript aktiviert ist), bis runter zum IE6! Der PHP-Compiler benötigt PHP Version 5.1+.

      Die verwendeten CSS-Eigenschaften sind natürlich mit den verschiedenen Browsern (leider) unterschiedlich kompatibel.

      Antworten

Hinterlasse einen Kommentar zu Daniel Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>