Einstieg: Drupal & SASS + Compass (mit Prepro und Sassy)

Der Einstieg in das Thema ist nicht ganz so leicht gemacht, daher hier eine kleine Zusammenfassung.

Die Grundsätzlichen Möglichkeiten mit dem CSS Preprocessor zu arbeiten: Lokale Ruby Installation aufsetzen (http://thesassway.com/beginner/getting-started-with-sass-and-compass) und die daraus generierten .css Files auf den Webserver laden (für die Entwicklung in meinen Augen völliger Käse, außer man bindet den entsprechenden FTP Folder als Netzlaufwerk ein. Die Möglichkeit der direkten „Portierung“ zu CSS Files bietet SASS). Vorteil dieser Variante ist schlicht und ergreifend, dass man die tatsächliche SASS Lib nutzt und nicht die PHP Portierung.

Wir wollten uns die zusätzliche Pflege lokaler Software und den Aufwand der Einrichtung allerdings schenken und setzen so auf die komplette online Variante mit den Modulen https://drupal.org/project/sassy, https://drupal.org/project/prepro und der Library https://github.com/richthegeek/phpsass.

Update: Inzwischen sind wir auf eine lokale Lösung mit Prepros umgestiegen, den Sync auf den Server erledigt unser Standard Tool WinSCP mit Hilfe der keepuptodate-Funktion, was inzwischen göttlich funktioniert. Die Entscheidung zum Umstieg erfolgte aufgrund etlicher Fehler in der PHP Portierung von SASS. Im kommerziellen Umfeld ist das nur mit Einschränkungen zu genießen. 

Die Einrichtung…

… sollte jedem Drupalisten leicht von der Hand gehen: Module aktivieren, Lib in den vom Modul geforderten Ordner packen, aktivieren (nicht das Sassy Compass integration – Modul übersehen!), prepro konfigurieren. Dann die .SCSS / .Sass Files im .info file des Themes eintragen und loslegen.

Ein paar „Fakten“:

• SCSS ist für Einsteiger einfacher zu erlernen
• SASS ist etwas kompakter zu schreiben
• Die PHPSass Portierung des eigentlichen Ruby Projekts Sass ist sicher nicht perfekt, aber läuft im großen und ganzen rund genug um damit arbeiten zu können.
• Compass ist in der PHPSass portierung bereits enthalten (die schönste Erklärung zu Compass ist sicher der Vergleich zu Javascript und jQuery – Compass ist ähnlich hilfreich, stellt vordefinierte @mixins zur Verfügung. .

Schöne Dokumente zum Thema:

• http://de.slideshare.net/nathansmith/drupal-compass
• http://de.slideshare.net/mediacurrent/elegant-css-design-in-drupal-less-vs-sass 
• https://drupal.org/project/sassy & https://drupal.org/files/Making%20Drupal%20Sassy.pdf

Hilfreiche Tools

• https://addons.mozilla.org/de/firefox/addon/firesass-for-firebug/ (Zeigt in Firebug die Zeile im .SCSS / .Sass Quellfile an, sofern @debug aktiviert ist (Prepro Einstellungen!)
• http://sass-lang.com/try.html – Klappt etwas nicht wie erwartet, wunderbar zum testen ob EVTL. PHPSass schuld ist 😉

Verfügbare Editoren

• Ich nutze Netbeans, welches in der aktuellen Dev Version (NetBeans IDE Dev (Build 201309191137)) SASS / SCSS ohne weitere Module unterstützt (die Alternative ist das folgende Plugin: http://plugins.netbeans.org/plugin/34929 – welches bei mir allerdings nur unzureichend funktionierte)
• Empfohlen wird weiterhin http://www.sublimetext.com/

Du brauchst Unterstützung bei deinem Drupal Webdesign-Projekt? Sprich uns an.