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.
Ein Kommentar zu “SASS unter PhpStorm kompilieren”