SCSS unter PhpStorm in einem spezifizierten Ordner zu CSS konvertieren

Styles mittels SCSS zu schreiben macht Spaß und bringt Effizienz. Im Artikel vom Februar - Sass / SCSS unter Netbeans verwenden - hatte ich schon ausführlich beschrieben, was SCSS ist und wie man es unter Netbeans verwendet. Unter PphStorm ändert sich nicht vieles. Wir brauchen weiterhin Ruby und auch sass. Um SCSS zu verwenden, einfach verlinkte Anleitung zu Netbeans bis zum Schritt “gem install sass” ausführen.

Watcher einrichten

PhpStorm braucht für das automatische Generieren einen sogenannten Watcher. Wir legen ein neues Projekt, legen einen Ordner scss und css an und legen anschließend einen SCSS-File Watcher an. Dazu navigieren zu File » Settings » Project Settings » Watcher. Anschließend klicken wir auf das Plus (alternativ Alt + Einfg) und wählen SCSS aus.

scss_phpstorm_filewatcher_1

Falls noch nicht der Pfad zur scss.bat gesetzt ist, muss diese noch ausgewählt werden. Wer die generierte CSS-Datei im selben Ordner behalten möchte, brauch nur noch OK klicken und kann mit den stylen loslegen.
Wer jedoch die CSS-Datei in dem vorher angelegten Ordner “css” generiert haben möchte, fügt folgenden Ausdruck in Arguments ein:

-no-cache --update $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css

Die restlichen Einstellungen bleiben auf Default.

scss_phpstorm_filewatcher_2

Erklärung: Durch die Macros von PhpStorm können wir den Ausgabepfad auf einen Ordner namens css leiten (Zum Parentordner navigieren und im Unterordner css-Dateie anlegen/updaten), welche Beispielsweise styles.scss zu styles.css konvertiert.

Als Beispiel legen wir eine Datei “_variables.scss” und “styles.scss” an. “styles.scss” inkludiert die “_variables.scss” um eine Farbe in der “styles.scss” zu verwenden. Dateien mit einem Unterstrich beginnend, werden nicht ohne Import generiert.

scss_phpstorm_filewatcher_3

// File: _variables.scss

$redColor: red;

// File styles.scss

@import	"_variables";

body {
  background: $redColor;
}

Mit jeder Änderung wird nun just-in-time die Datei “styles.css” erstellt/geupdatet unter dem Ordner css im Projektordner.