SCSS - Vorrausetzungen
1. Und schon beginnt das Elend
Denn Sass/SCSS wurde in Ruby geschrieben. Also muss sowohl das als auch Sass erst installiert werden. Die Bedienung erfolgt dann über die Kommandozeile oder der Server muss entsprechend konfiguriert werden. Klingt sehr unkomfortabel und ist es auch. Gottlob gibt es mittlerweile etliche nützliche Helferlein, von denen die meisten in der Vollversion allerdings Geld kosten. Darum stelle ich hier ein OpenSource-Tool vor, das kaum Wünsche offen lässt.
2. Koala
... nennt sich das Programm und kann an dieser Stelle herunter geladen werden. Es beinhaltet bereits Ruby und ist nach der Installation sofort einsatzbereit.
Warnung!
Nach einem Update auf die 2.1.0 ging bei mir gar nichts mehr! Statt dessen bekam ich nur eine ellenlange Fehlermeldung um die Ohren gehauen. Wer auch dieses Problem hat, sollte sich die alte 2.0.4 ziehen. Die läuft zumindest bei mir einwandfrei.
3. Die Oberfläche
... ist geradezu minimalistisch aufgeräumt.
Einstellungen
Dafür klickt man rechts oben auf das Zahnrad und wählt dann Sass aus, da der Rest uns hier nicht interessiert. Ich persönlich entferne alle Häkchen. Beim Ausgabemodus solltet ihr auf jeden Fall in der Lernphase "expanded" nehmen. Denn dann könnt ihr alles besser nachvollziehen.
4. Ein Projekt anlegen
Dazu klickt man einfach auf das "Plus"-Zeichen und wählt den Ordner aus. Vorher solltet ihr aber eine leere Datei mit der Endung .scss anlegen. Das Ergebnis
könnte dann zum Beispiel so aussehen.
Ein Hinweis
Koala nimmt als Projektbezeichnung immer erst mal den Ordnernamen. Den könnt ihr aber jederzeit mit Rechtsklick auf Selbigen über "Umbenennen" ändern.
5. Feintuning
Dazu klickt ihr zuerst auf die SCSS-Datei und bekommt dann rechts die folgenden Leiste zu sehen. Lasst den Punkt "Automatische Kompilierung" auf jeden Fall aktiv. Dann schaut Koala zwar ständig nach, ob sich etwas an der Datei geändert hat. Und das kann schon mal für entsprechenden Traffic auf dem Server sorgen. Da SCSS aber eh nur in der Entwicklung und nicht live eingesetzt wird, kann man das verschmerzen.
Außerdem sollte ihr zumindest in der Lernphase der Ausgabestil auf "expanded" gesetzt werden, damit man den erzeugten Code besser lesen kann.
Anschließend kompiliert ihr über den Button die Datei. Mit Rechtklick auf den Ordner und dem Punkt "neu laden" aktualisiert sich die Anzeige und wir können loslegen.
Ein Hinweis
Wenn ihr eine Änderung an der SCSS-Datei vornehmt, so wird die CSS-Datei sofort neu geschrieben. Allerdings bekommen das einige Editoren wie zum Beispiel Notepad++ nicht sofort mit. Also wartet ein bis zwei Sekunden.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt