Appell an Firefox und Chrome: Nativer LESS/Sass-Compiler im Browser

Seit einiger Zeit arbeite ich verstärkt mit CSS Preprozessoren wie LESS und Sass. Diese Compiler erweitern CSS um nützliche Sprachkonstrukte wie Variablen, Nesting (Verschachtelung von Befehlen) oder Mixins (Funktionen). Das bringt nicht nur Übersichtlichkeit in den Code, sondern erleichtert auch die Wartung und gibt Entwicklern die Möglichkeit ihren Code wiederverwendbar zu programmieren.

Der große Nachteil bei der Nutzung ist allerdings die Tatsache, dass es sich um Preprozessoren handelt. Das heißt der LESS- bzw. Sass-Code wird, vor der Auslieferung an den Browser, in natives CSS umgewandelt. Damit der Deployment-Prozess für den Entwickler nicht zu aufwendig wird, läuft auf dem Server meist eine eigene Instanz des Compilers, der automatisch ausgeführt wird, wenn sich an den LESS-/Sass-Dateien etwas geändert hat.

Inzwischen frage ich mich aber, warum man sich als Entwickler die ganze Arbeit mit einem Preprozessor machen muss. Warum werden diese doch sehr nützlichen Sprachkonstrukte für CSS nicht einfach nativ in den Browser übernommen? Daher mein Appell an den W3C und die Macher von Firefox, Chrome und Co: Übernehmt doch bitte die Funktionen von LESS und Sass in die neue CSS 4.0. Ihr würdet damit viele Webdesigner und HTML-Entwickler glücklich machen und – ganz nebenbei – die Qualität des Webs enorm steigern.

SASS unter PhpStorm kompilieren

SASS (Syntactically Awesome Stylesheets) bzw. SCSS ist eine Art Scriptsprache für normales CSS. Es ermöglich es CSS sauberer, übersichtlicher und einfacher zu gestalten. Und so funktioniert’s: Zuerst benötigt ihr Ruby und den eigentlichen Compiler für SASS. Der Compiler ist in Ruby geschrieben und damit plattformunabhängig. Dann könnt ihr loslegen und euren CSS-Code mit den neuen Features umsetzten, speichert die Datei aber mit der Endung .scss ab. Anschließend wird der Compiler aufgerufen, der aus dem SASS-Code in normales und ggf. auch komprimiertes CSS umwandelt. Der Aufruf des Compilers passiert über den folgenden Konsolenbefehl:

sass --watch "/Pfad/zur/SASS/Datei.scss":"/Zielpfad/zur/CSS/Datei.css" --style compressed

Mit der Option –watch wird die CSS-Datei jedesmal aktualisiert, sobald die SCSS-Datei geändert wurde. Ein weiterer Aufruf ist also nicht notwendig. Trotzdem wäre es nett, wenn der Aufruf über durch einen Klick abgelöst werden könnte. Mit PhpStorm lässt sich das nach ein wenig Konfigurationsarbeit ganz einfach erledigen.

Als erstes müssen die Einstellungen (Settings bzw. Preferences unter Mac) von PhpStorm geöffnet werden. Anschließend auf den Bereich External Tools und ein neues Tool über den Add-Button anlegen.

Die Felder können wie folgt ausgefüllt werden.

Name: Compile SASS
Group: Language processors
Program (Linux/Mac): sass
Program (Windows): C:\path_to_ruby\bin\sass.bat
Parameters: –watch „$FilePath$“:“$FileDir$/../$FileNameWithoutExtension$.css“ –style compressed
Working directory: $ProjectFileDir$

Die Checkboxen für Open console und Synchronize files after execution könnt ihr nach eigenem Ermessen deaktivieren.

Jetzt bauen wir uns eine Verzeichnisstruktur, die so ähnlich aussieht:
/css/src/style.scss
/css/style.css
In den Ordner src kommen somit die SCSS-Dateien rein und in den übergeordneten Ordner werden die CSS-Dateien automatisch reingeschrieben.
Mit einem Rechtsklick auf die Datei und dann unter Language processors > Compile SASS wird dann der oben genannte Befehl ausgeführt.