SASS & Compass – komplexes CSS einfach managen

Compass ist ein großartiges Tool, um ein Webprojekt auch nachträglich mit Foundation „aufzupeppen“. Außerdem erledigt es nebenbei alle nötigen Arbeiten, um Anpassungen am Framework sofort als CSS bereitzustellen. Und wenn man schon mal dabei ist, kann man auch gleich SASS nutzen, um seine eigenen Styles einfacher zu managen.

Compass installieren

Compass benötigt Ruby und ist dann sehr einfach zu installieren:

gem update --system
gem install compass

Bestehendes ASP.NET MVC4 -Projekt erweitern

Um ein typisches Webprojekt um Compass-Unterstützung zu erweitern, müssen lediglich die folgenden Befehle ausgeführt werden:

cd <myproject>
compass create --bare --sass-dir "Content\sass"
    --css-dir "Content" --javascripts-dir "Scripts"
    --images-dir "Content\images"

Verzeichnisüberwachung starten

Mit dem Befehl „compass watch“ kann das akuelle Verzeichnis überwacht werden – der Watcher startet aber nur, wenn es schon eine *.SASS oder *.SCSS Datei zu überwachen gibt, weswegen vorher im Verzeichnis „.\Content\sass“ z.B. eine Datei „Styles.scss“ händisch angelegt werden sollte.

Foundation mit Compass installieren

Wie auf der Foundation-Homepage beschrieben, ist es sehr einfach, Foundation zu installieren:

gem install zurb-foundation

oder zu aktualisieren:

gem update zurb-foundation

Ist ein Projekt bereits für Compass eingerichtet, liegt eine „config.rb“ Datei im Projektverzeichnis. Diese muss (am besten am Anfang) um den Eintrag require "zurb-foundation" ergänzt werden, was dann die Ausführung des folgenden Befehls ermöglicht:

compass install foundation

Und damit ist das Projekt dann auch schon bereit für den Einsatz von Foundation!