SCSS unter PhpStorm in einem spezifizierten Ordner zu CSS konvertieren
Styles mittels SCSS zu schreiben macht Spaß und bringt Effizienz. Mittels PhpStorm und einem Watcher SCSS zu CSS generieren.
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.
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.
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.
// 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.