Nicht nur, weil Magento 2 less nutzen wird, kann es nicht schaden, es bereits in 1.x-Versionen zu nutzen. Selbst wer nur einige less-Features nutzt, kann CSS-Dateien damit erheblich leichter lesbar und vor allem leichter wartbar machen. Dieser Beitrag beschreibt, wie man less in Magento 1.x einbindet und nutzt.

less kann auf verschiedenen Wegen eingesetzt werden. Grundsätzlich sollte man unterscheiden zwischen dem Einsatz auf dem Server und auf einem Entwicklungsrechner. Denn: Auf einem Live-Server hat less nichts verloren. less-Dateien werden vor dem Kopieren auf den Server zu Standard-CSS kompiliert und nur das Ergebnis auf dem Server genutzt.

Möglichkeit 1: PHPStorms less-Integration nutzen

Die erste Möglichkeit, less auch für Magento 1.x zu nutzen, basiert auf den Fähigkeiten von PHPStorm. (Vielleicht geht das auch mit anderen IDEs — ich hab’s nicht ausprobiert.)

PHPStorm unterstützt die Arbeit mit less, indem es einen speziellen File-Watcher zur Verfügung stellt. File-Watcher können immer dann, wenn eine Datei verändert wird, eine bestimmet Aktion auslösen, z.B. ein Programm starten. Mit PHPStorm kann man einen less-FileWatcher so einsetzen, dass die less-Datei nach einer Änderung (d.h. nach dem Speichern) sofort in eine normale CSS-Datei übersetzt wird. In Magento kann man dann immer diese übersetzte Datei einbinden, für Magento bleibt völlig transparent, dass sie nach jedem Speichern der less-Datei durch den FileWatcher neu erzeugt wird.

Ein solcher less-File Watcher ist in PHPStorm schnell erstellt. Im Preferences-Dialog findet sich unter dem Punkt Tools der Unterpunkt File Watchers. Durch Anklicken des Plus-Icons bekommt man eine Liste der möglichen File-Watcher und wählt dort den less-Watcher aus. Im folgenden Dialog sind die meisten Werte schon vorausgefüllt, ich konnte für meine Arbeit alles übernehmen.

Ist der File-Watcher nun konfiguriert, wird nach jeder Änderung an der less-Datei eine CSS-Datei kompiliert. Diese kompilierte Datei kann man in Magento einbinden wie jede andere CSS-Datei auch. Dass sie das Kompilations-Ergebnis einer less-Datei ist, bleibt für Magento völlig transparent.

Diesen File-Watcher kann man nun noch mit einem weiteren kombinieren, um die less-Datei nicht nur nach CSS zu kompilieren, sondern auch noch zu komprimieren. Und auch das Ergebnis dieser Komprimierung bleibt für Magento transparent, da man immer nur das Ergebnis von Kompilation und/oder Komprimierung in Magento einbindet.

Der Vorteil dieser Lösung ist nicht nur, dass PHPStorm dem Entwickler einiges an Arbeit abnimmt — man muss Kompilation und Komprimierung schließlich nicht mehr selbst vornehmen. Ein großer Vorteil ist v.a. auch, dass man in Magento immer nur das Ergebnis von Kompilation und Komprimierung einbindet; und das ist in der Entwicklungsumgebung und auf dem produktiven Server immer gleich. Und so arbeitet man schon bei der Entwicklung mit der gleichen Magento-Konfiguration wie auf dem Server und hat auf diesem Wege eine Fehlerquelle weniger.

Möglichkeit 2: Integration allein mit less-Mitteln

less bietet ein praktisches Feature, mit dem man auch ohne Unterstützung der IDE mit less arbeiten kann. less kann so eingesetzt werden, dass die less-Datei im Browser anstelle der CSS-Datei geladen und beim Laden der Seite zu CSS kompiliert wird. Das trägt natürlich nicht unbedingt zu Performance-Steigerungen bei. Deshalb sollte dies auch nur auf dem Entwicklungsrechner geschehen.

Ich habe mehrere Lösungen ausprobiert, die folgende finde ich am einfachsten.

Zunächst muss natürlich die less-JavaScript-Datei (less.min.js) auf den Entwicklungsrechner, am besten in das js-Verzeichnis im Skin (oder in ein anderes Verzeichnis im Skin, das für JavaScript-Dateien benutzt wird).

Anschließend müssen in der local.xml-Datei des Themes das Laden der ‚alten‘ Theme-eigenen CSS-Datei auskommentiert werden. Stattdessen wird folgendes eingebunden:

<reference name="head">
  <block type="core/text" name="lesscss">
    <action method="setText">
      <less>
        <![CDATA[
          <link rel="stylesheet/less" type="text/css" href="/skin/frontend/package/theme/css/mylessfile.less" media="all" />
          <script type="text/javascript" src="/skin/frontend/package/theme/js/less.min.js"></script>
        ]]>
      </less>
    </action>
  </block>
</reference>

Grundsätzlich muss natürlich die URL für die Dateien angepasst werden. Danach sollte es möglich sein, mit der less-Datei zu arbeiten, als wäre es eine CSS-Datei: Änderungen werden beim (Re-)Load der Magento-Seite transparent kompiliert und stehen sofort zur Verfügung. Bei mir ist dadurch auch kein Performance-Verlust zu bemerken.

Auf einem Live-Server sieht das natürlich anders aus, da hat gehört less nicht hin, dort wird die kompilierte CSS-Datei eingesetzt. Auf dem Server also den obigen Block aus der local.xml rausnehmen und den Kommentar um das Einbinden der Theme-eigenen CSS-Datei entfernen. Und vor dem Hochladen der neuen CSS-Datein das kompilieren nicht vergessen.