Doch bevor man all diese unglaublichen Vorteile nutzen kann, muss SASS installiert werden. Dies ist nicht ganz so einfach, wie es sich anhört. Dabei können schnell ein paar Stunden verstreichen, bis man sich die Infos aus verschiedensten Tutorials zusammengesucht hat.
In diesem Tutorial zeigen wir, wie man SASS unter Mac OSX zusammen mit Coda 2 installiert. Nun gut, starten wir mit der Installation von SASS.
SASS benötigt Ruby. Auf dies möchten wir im Detail nicht eingehen. Es muss einfach vorhanden sein.
Zuerst müssen wir uns versichern, dass Ruby installiert ist. Beim Mac sollte dies standardmässig der Fall sein. Dies können wir leicht verifizieren.
Wir öffnen das Terminal Spotlight >> Termnial
Danach folgendes eintippen (ohne “$”. Dies zeigt nur an, dass dies ein Kommandobefehl ist):
$ ruby -v
Wenn Ruby installiert ist, sollte die Versionsnummer zurückgegeben werden (Bsp. “Ruby 1.8.7”).
Gut.
Nun sind wir bereit um SASS zu installieren. Wieder in der Kommandozeile:
$ sudo gem install sass
Weil dieser Befehl mit sudo ausgeführt wird (d.h. als Administrator) muss das persönliche Passwort eingegeben werden. Danach erfolgt die Installation. Wenn dies erfolgreich geklappt hat, sollte die Rückmeldung wie folgt aussehen: Successfully installed sass-3.4.9
Nun sind wir bereit mit SASS zu arbeiten – fast. Wir können nun SASS Dokumente (.scss) schreiben. Diese müssen jedoch am Ende immer in .css-Dokumente umgewandelt werden. Dazu gibt es die Möglichkeit einen Watcher zu installieren, welche die Dokumente übersetzt.
Der einfachere Weg ist jedoch, wenn dies bei jedem Speichervorgang automatisch passiert. Das Programm Coda 2 löst diesen Vorgang mittels Plugin ab.
Hier ist die Voraussetzung, dass Coda 2 installiert ist (https://panic.com/coda/). Nun noch das Plugin Sass 3.0.2 by Elbongurk LLC installieren (https://github.com/keegnotrub/coda-sass-plugin/releases/download/v3.0.3/Sass.codaplugin.zip). Die .zip-Datei entpacken und Doppelklick auf Sass.codaplugin.
Nun wird bei jedem Speichervorgang automatisch im gleichen Ordner die übersetzte .css-Datei erstellt. Das Plugin wurde erfolgreich installiert, wenn unter Plug-ins Sass Preferencess… auftaucht:
SASS-Datei erstellen
Nun erstellen wir eine SASS-Datei (style.scss). Damit es schön angezeigt wird, muss der Syntax Mode eingestellt werden.
Perfekt. Nun können wir unser SASS Code schreiben. Um die Basics zu verstehen schaut ihr am besten bei SASS selbst vorbei http://sass-lang.com/guide.
Hier ein kleines Beispiel, links der SASS Code, rechts das übersetzte CSS.
