Workflow mit Aptana und SASS

Früher, als kleine pelzige Wesen von Alpha-Centauri noch kleine pelzige Wesen von Alpha-Centauri waren, da war alles besser. HTML hat man von Hand gecodet, oder wenn man modern veranlagt war, dann hat man eine Kombination von HomeSite und PaintShop genommen. Projekte waren klein und übersichtlich. Aber das ist heute anders, und nachdem CSS die Inline-Styles samt Layouttabellen abgelöst haben, kommen Stylesheets gerne mal beim Ausdruck auf dreißig und mehr Seiten.

Das kann man von Hand schreiben - aber irgendwann leidet der Überblick. Spätestens dann, wenn sich am Tag vor dem Launch herausstellt, dass die von der Grafikabteilung genannten Farbwerte eben doch nur grob geschätzt waren und global gegen die Exakten ausgetauscht werden müssen. Sofort.

Heutzutage gibt es Werkzeuge wie LESS oder SASS in Verbindung mit Compass dafür, die variablenbasiertes CSS kompilieren, und das Weiterverwerten von Code über so genannte Mixins ermöglichen - so beschränkt sich das Vorkommen der Farbwerte im besten Fall auf eine Variable. Austauschen, neukompilieren, fertig. Contao-Erweiterungen wie Theme+ unterstützen dabei, indem sie sie Einbindung von CSS (und vielem mehr) als externe Dateien ermöglichen.

Und der lokale Workflow?

Ich persönlich arbeite mit Aptana, einer recht umfangreichen Entwicklungsumgebung, die den Vorteil hat, unter Windows, Linux und OSX lauffähig zu sein. Ich habe hier mehrere Systeme, da lernt man das zu schätzen. Unter MacOS ist das alles einfach installiert, Windows verhält sich wie erwartet etwas sperriger. Um SASS und das auf Ruby aufsetzende Compass mit Aptana unter Windows nutzen zu können sind ein paar einfache Schritte nötig.

Schritt 0 - Installation

Zuerst einmal benötigt man (logisch ...) Aptana (http://www.aptana.com/products/studio3/download), um danach Ruby zu installieren. Der Installer findet sich unter http://rubyinstaller.org/downloads/. Hierbei merken wir uns, wohin wir Ruby installiert haben - beispielsweise nach C:\Ruby193\bin.

Schritt 1

Wir öffnen jetzt Aptana und erzeugen ein neues Projekt - dabei ist es relativ egal, ob HTML oder PHP. Für dieses Projekt legen wir ein Verzeichnis fest (Aptana fragt danach) und entscheiden uns dabei für etwas wie Z:\clients\projektname\apw.misc - das ist das Webroot unseres Projektes, in dem sich später Bilder, Javascript und auch das CSS befinden wird. Wir merken uns das auch.

Schritt 2 - Einrichtung

Als nächstes öffnen wir eine Windows-Kommandozeile (und ja, das muss sein, weil über die Shell jetzt Compass installiert wird).

Einen Wechsel ins Ruby-Verzeichnis bewerkstelligen wir mit cd "C:\Ruby193\bin, die Compass-Installation machen wir mit gem install compass.

Jetzt sind Compass und Ruby installiert, und wir legen ein Projekt an, indem wir den folgenden Aufruf machen:

compass create Z:\clients\projektname\apw.misc --sass-dir=sass --css-dir=css

Im Prinzip war's das schon - projektspezifische Dateien hat Compass bereits angelegt. Im Projektordner sollten sich jetzt befinden:

• - ein Ordner für die SASS-Dateien unter /SASS mit eingen Standard-Dateien
• - ein Ordner für CSS-Daten unter /CSS, in dem bereits die ersten kompilierten Daten liegene
• - eine Konfigurationsdate namens /config.rb, in der sich die Projekteinstellungen befinden.

Wenn wir lokal arbeiten (beispielsweise mit einem lokalen Webserver wie XAMPP), dann könnte im Projektverzeichnis dann auch noch unsere Contao-Installation liegen, in die wir jetzt die Dateien aus /css einbinden. Das geht ganz praktisch auch über einen Symlink - dann kann sich Contao an jedem Ort auf dem Rechner befinden. Ich persönlich bevorzuge die Einbindung über Theme+, aber man kann CSS ja auch mittels einiger Angaben im Headbereich des Seitenlayouts einbinden. Viele Wege führen nach Rom.

Schritt 3 - die Magie

Compass kann Änderungen beobachten und bei Bedarf das CSS neu kompilieren. Der Befehl auf der Kommandozeile compass watch Z:\clients\projektname\apw.misc sorgt dafür, das jede Änderung an unseren SASS-Daten automatisch in die Dateien unter /css übernommen wird. Da Contao diese kompilierten Stylesheets unmittelbar zur Verfügung stehen sind wir jetzt fertig.

That's it & happy coding.