SASS und Compass Teil 2: Compass aufsetzen

Mann mit Schraubenschlüssel

Warum eigentlich Compass und nicht SASS, und was ist überhaupt der Unterschied?

SASS ist ein Preprocessor für CSS, und die dazu passende Skriptsprache, um aus den .sass bzw .scss (wir verwenden in den ganzen Beispielen .scss) Dateien "normale" CSS-Dateien zu erzeugen.

Compass ist ein Framework bzw. Komponenten-Bibliothek zu SASS. Es enthält jede Menge vorgefertigte Bausteine (Mixins usw), die man dann nicht mehr selber bauen muß. Da diese Bausteine sehr einfach zu erstellen und zu verwenden sind, kann man es vielleicht mit den Bundles für Textmate vergleichen. Da Compass auf SASS aufbaut, installiert es SASS gleich mit. Also brauchen wir nur Compass zu installieren und haben beides.

Compass aufsetzen auf Windows mit Cygwin

Wir müssen zunächst Ruby installieren, da Compass in Ruby geschrieben ist. Es gibt auch PHP-Pakete, die aber Ports sind, und in der Funktionalität immer etwas hinterherhängen, da die Entwicklung im Hauptprojekt stattfindet. Der Workflow von undpaul verwendet ausschließtlich Git (schlimmstenfalls eine andere Versionsverwaltung), statt per FTP direkt auf dem Server zu arbeiten. Wir müssen daher nicht auf einem Remote Server .scss Dateien kompilieren, und brauchen uns nicht mit einem auf dem Server eventuell nicht vorhandenen Ruby auseinanderzusetzen.

Cywig

Ich verwende für Git, Bazaar und auch Compass Cygwin. Das vereinfacht den Installationsprozeß deutlich, und ich kann die gleichen Terminal-Befehle verwenden wie die Kollegen auf dem Mac und in Linux. Also Ruby einfach über die setup.exe von Cygwin Ruby installieren:

Nun brauchen wir noch Ruby Gems, die Paketverwaltung von Ruby. Zunächst prüfen wir, ob diese von Cygwin mitinstalliert wurde:

gem -v

Wir bekommen eine Versionszahl angezeigt, wenn ja, z.B. "1.8.15". Falls nicht, folgen wir der Anleitung von Steven Harman. Ruby Gems von Rubyforge herunterladen. Mit Cygwin in das heruntergeladene Verzeichnis navigieren, und folgendes ausführen

ruby setup.rb install

gem update --system

Compass zu installieren, ist nun denkbar einfach:

gem install compass

Sass Compass Teil 2

Der Befehl zieht Compass vom Download-Repository herunter und installiert es, ganz wie man es in Linux von apt-get install kennt.
Wir sehen, daß neben zwei weiteren Paketen SASS und Compass in der aktuellen Version installiert werden.

compass help

So prüfen wir, ob Compass korrekt installiert wurde. Wenn ja, erscheint eine Übersicht der Compass-Befehle. Der gesamte Installationsprozess ist hier nochmal im Zusammenhang beschrieben.

Compass auf dem Mac installieren

Diesen Teil werden die Mac-affinen Kollegen bestimmt noch ergänzen, ich kann erstmal nur externe Tutorials zitieren. Meines Wissens nach ist Ruby und Ruby Gems auf Mac Os X vorinstalliert. Man sollte sich also gar nicht darum kümmern müssen. Wenn man die Versionen der Pakete updaten möchte, ist das allerdings evtl. etwas hakelig, da sie als integraler Systembestandteil verwaltet werden und nicht verändert werden sollten. Das Problem und eine Lösung beschreibt dieser Post: http://stackoverflow.com/questions/3474875/why-does-mac-os-x-come-with-ruby-rails

Gehen wir aber einfach davon aus, daß gar kein Problem besteht, sondern Ruby und Ruby Gems da sind und funkitonieren. Wieder der einfache Check, ob Gems betriebsbereit ist

gem -v

Dann reicht

sudo gem install compass

vielleicht, wie in der Windwos-Sektion beschrieben, noch die Installation von Compass mit

compass help

überprüfen, und alles ist bereit.

Das config-file erzeugen

Die schlankeste Methode, um Compass zu benutzen, ist das Erzeugen einer config.rb-Datei. Diese teilt Compass ein paar einfache Parameter mit, so daß es weiß, woher es die .scss-Dateien holen soll und wo es die .css-Dateien hinpacken soll. Es gibt noch einige Optionen mehr, die wir hier jedoch nicht im Detail beleuchten.

Wir gehen mit der Konsole in das Root-Verzeichnis unseres Themes. Nun führen wir folgendes aus:

compass config

Der Befehl erzeugt einen Ordner /config, und darin befindet sich die Datei compass.rb. .rb ist die Dateiendung für Ruby-Code-Dateien. Wir benennen compass.rb um in config.rb, damit sie als Konfigurationsdatei erkannt wird.

Die Datei sieht nach dem Erzeugen so aus (abgesehen von Kommentaren):

http_path = "/" css_dir = "stylesheets" sass_dir = "sass" images_dir = "images" javascripts_dir = "javascripts" Da die Datei im Unterordner /config liegt, müssen wir die Pfade noch anpassen, auch heißen bei mir meist die Ordner anders: http_path = "/" css_dir = "../css" sass_dir = "../sass" images_dir = "../images" javascripts_dir = "../js"

Wir können die Pfade und Ordnernamen beliebig anpassen, sie müssen nur den tatsächlichen Gegebenheiten entsprechen. .scss-Dateien kommen in einen Unterordner /sass, damit sie entsprechend dem oben angegebenen Pfad gefunden werden. Fertig. Nun müssen wir nur jedesmal

compass compile config

ausführen, wenn wir aus unseren .scss-Dateien die passenden .css erzeugen wollen. Wenn alles gut läuft, sagt uns Compass

overwrite config/../style.css

Loslegen...

Automatisch kompilieren

Als Alternative dazu, jedes Mal compass compile auszuführen, kann man Compass das auch automatisch erledigen lassen. Dann wird jedes Mal, wenn man die .scss-Datei speichert, automatisch kompiliert und die CSS-Dateien erzeugt. Ich verwende es nicht, da ich lieber manuell die Kontrolle habe, jedoch mag es manchen in der automatischen Variante komfortabler erscheinen.

Man begibt sich in den Root-Folder des Themes und führt folgendes aus

Compass watch

Nun sind alle .scss-Dateien zum automatischen Kompilieren registriert. Eine typische Antwort auf der Konsole, die dies bestätigt, wäre z.B.

>>> Change detected to: sass-styles.scss create stylesheets/sass-styles.css >>> Compass is polling for changes. Press Ctrl-C to Stop.

Man muß das betreffende Konsolenfenster offen lassen und kann es, während Compass die .scss Dateien watcht (auf Änderungen überwacht), nicht für andere Befehle verwenden. Wie angegeben stoppt Strg + C das Watchen.

Syntax-Check

Das Debugging in Compass/Sass funktioniert prima. Wenn ich in meiner .scss-Datei falschen Code einbaue, gibt mir die Kommandozeile beim Kompilieren einen Fehler aus:

error sass/sass-styles.scss (Line 180: Undefined variable: "$tags-hover-color".)

Auch das erzeugte Stylesheet sieht in diesem Fall seltsam aus: die Fehlermeldung wird in das Stylesheet geschrieben, eine lange Liste von Gem-Dateien wird angegeben und der größte Teil der Styles fehlt. Also einfach Fehler korrigieren und nochmal kompilieren.

Um das Benutzen von SASS geht es in Teil 1 dieser Mini-Serie: SASS und Compass Teil 1: SASS macht das Leben leichter