Für CSS gibt es eine Anzahl von Präprozessoren, die einem den Umgang mit dieser deklarativen Sprache erleichtern. So werden geschachtelte Definitionen, Variablen, Mathematik und Makros ermöglicht. Einer dieser kleinen Helfer, den wir gerne einsetzen ist Less, die Sprache für „Less CSS“ Der Vorgang ist, unabhängig vom verwendeten Dialekt, immer gleich:
- Erweitertes CSS schreiben
- Verarbeiten lassen
- dem Browser übermitteln
Gebräuchlich sind hierfür nun zwei Methoden;
- Dem Browser direkt die Rohdaten übermitteln und selbst übersetzen lassen, zum Beispiel mit less.js
- Die .less Datei vom Server übersetzen lassen und als fertiges CSS ausliefern, zum Beispiel mit lessphp
Letzteres wird zum Beispiel von Pimcore mit einem Outputfilter realisiert; hierbei wird der HTML-Sourcecode nach einem <link rel="stylesheet/less" type="text/css" href="BLAHFASEL.less"> durchsucht, gefundene Links auf die .less-Quelldateien an lessphp übergeben, der Link auf das Resultat „umgebogen“ und das angepasste HTML schlussendlich an den Browser übergeben. Seit PHPStorm Version 6 gibt es nun eine dritte Möglichkeit, die noch früher ansetzt: das .less wird direkt von der IDE zu CSS übersetzt.
Filewatcher
Es gibt für diese IDE nun sogenannte Filewatcher, also Hintergrundprozesse, die Aufgaben für definierte Files ausführen, sobald sich diese verändern. Dies eröffnet eine ganze Reihe von Möglichkeiten, eine davon ist es, ein .less File direkt nach dem Abspeichern in ein CSS übersetzen zu lassen. Dadurch wird dieser einmalige Task sofort und vom Rechner des Entwicklers erledigt, und weder Webserver noch Browser müssen sich damit jemals wieder mit LessCss beschäftigen. Darüber hinaus zeigt der Prozess sofort auf, wenn Fehler beim Übersetzen aufgetreten sind, das erleichtert die Erkennung von Fehlern.
less.js installieren um lesscss zu verarbeiten
Der Präprozessor für .less–Files muss als Befehl für die Kommandozeile vorliegen. Hier könnte man zum Beispiel less.php im CLI-Modus von PHP ausführen lassen, ich habe mich der Einfachheit halber aber für die Node.js Variante entschieden. Zuerst muss natürlich node.js installiert sein. Unter Gentoo erreicht man das mit einem einfachen Befehl:
emerge nodejs
Node.js bringt seinen eigenen Paketmanager mit, damit lässt sich dann leicht less.js nachladen und installieren:
npm install -g less
Das war's, mehr ist nicht zu tun.
Konfiguration des Filewatchers
[caption id="attachment_762" align="alignright" width="300"]
PHPStorm frägt, ob ein Watcher eingerichtet werden soll[/caption] PHPStorm erkennt anhand der Filekennung automatisch, ob ein File bearbeitet wird, für den sinnvollerweise ein Watcher eingerichtet werden könnte und schlägt dies dann vor. Mit einem Klick auf "Add watcher" kann man dies nun tun, bei einem Klick auf "Dismiss" verschwindet der Vorschlag – und kehrt auch nie wieder. [caption id="attachment_761" align="alignright" width="300"]
Filewatcher Konfiguration[/caption] Wenn man den Vorschlag einmal weggeklickt hat, oder den Filewatcher nachträglich bearbeiten muss, kann man dies in den Einstellungen von PHPStorm erledigen, die man über File - Settings - Project Settings - File Watchers erreicht. Man sollte darauf achten, das Immediate file synchronisation und Check file for syntax errors aktiviert ist, der Pfad zum Compiler findet man an der Konsole heraus mit den Kommando
which lessc
Ein Klick auf OK speichert die Einstellungen ab. [caption id="attachment_764" align="alignright" width="300"]
Automatisches Hochladen aktivieren[/caption] Wer auf Remote Servern arbeitet, sollte noch das automatische Hochladen der resultierenden CSS-Datei aktivieren, sonst ist es erforderlich, diese jedes Mal per Hand hochzuladen. Dies kann man unter Tools->Deployment->Options erreichen, wichtig ist es bei „Upload changed files automatically to the default server“ die Einstellung always zu wählen und bei „Upload external changes&ldquot; einen Haken zu machen. Fortan sieht man beim Abspeichern der .less-Datei im File-Transfer Infofenster von PHPStorm, dass zwei Dateien auf den Server übertragen wurden :) Hast Du Kommentare, Fragen oder Anregungen zum LESS-Filewatcher? Wir freuen uns über Beiträge in unserem Kommentarbereich!