Wie installiere ich Compass & Sass einfach und unkompliziert?

CSS Präprozessoren sparen Zeit und Code (siehe „CSS Preprocessoren – Warum sie sinnvoll sind!“). Wie installiere ich Sass auf meinem Computer?

Wir empfehlen die Installation von Sass mit Compass. Dank der vielen Vorteile von Compass:

  • vorgefertigter Mixins wie CSS-Hacks, Clearfixes und Reset-Styles
  • vereinfachtes Cross-Browser CSS3 mit nur einer Code-Zeile
  • automatisiertes Erstellen von CSS-Sprites
  • effizienteres CSS

erleichtert es das Erstellen von Webprojekten und macht Sass noch Sassier. ☺ Wenn Ihr Compass über die Kommandozeile nutzen wollt, ist es kostenfrei. Die hauseigene Compass-App kostet 10 US Dollar.

Voraussetzung für die Installtion von Compass ist Ruby

Windows- und Linux-Nutzer müssen Ruby erst installieren – beim Mac ist es schon integriert. Ob Ruby bei Euch bereits installiert ist, könnt Ihr mit folgendem Befehl im Terminal testen:

ruby –v

Ist Ruby installiert, könnt Ihr auf der Ruby Download-Seite kontrollieren, ob Eure Version nicht zu alt ist. Ihr müsst nicht die aktuellste Version haben, jedoch empfehlen wir eine Version ab 1.8+ um Kompatibilität und Stabilität zu gewährleisten.

Installtion Compass:

In der Kommandozeile gebt Ihr den Befehl:

gem install compass

ein und schon ist Compass installiert.

Projekte mit Compass anlegen:

Um ein neues Projekt anzulegen gebt Ihr in der Kommandozeile folgenden Befehl ein:

compass create /pfad/zum/projekt

An der angegebenen Stelle erzeugt Compass einen Ordner „projekt“ mit den dazugehörigen vorgefertigten Dateien.

Mit Compass Sass in CSS übersetzen:

Zuerst müsst Ihr Euch in der Kommandozeile in Euren Projektordner begeben. Dorthin gelangt ihr mit folgendem Befehl:

cd /pfad/zum/projekt

Wenn Ihr jetzt den Befehl:

compass watch

eingibt, „beobachtet“ Compass die Sass -Dokumente in Eurem Projektordner. In der Kommandozeile sollte folgendes stehen:

$ projekt git:(master) compass watch
FSSM -> An optimized backend is available for this platform!
FSSM -> gem isntall rb-fsevent
>>> Compass is polling for changes. Press Ctrl-C to Stop.

Sobald eine Änderung an eines der Sass -Dokumente vorgenommen und gespeichert wird, wird diese automatisch von Compass in das dazugehörige CSS-Dokument konvertiert.

Fazit

Das Aufsetzen von Sass mit Compass ist super einfach. Einmal gemacht, muss man nur noch die entsprechenden Projekte anlegen. Eine Alternative um den Befehl „compass watch“ zu umgehen ist das Tool Koala. Wie Ihr Sass schreibt erfahrt Ihr im nächsten Artikel.