Einstieg in Sass und Compass bei eigenen Projekten

Im vierten Quartal 2011 bin ich auf Sass bzw. Scss aufmerksam geworden, doch den ersten Einsatz dieser Technik habe ich dann bis Ende 2012 verschleppt.

Die Möglichkeiten die Sass bietet hatten mich damals schon direkt überzeugt, aber die Sorge, dass man in einem echten Kundenprojekt sich mit den neuen Möglichkeiten verzettelt waren auch berechtigt. Beim ersten Projekt hatten nicht alle Entwickler die gleiche Wissensbasis zu Sass und dadurch kam es häufig dazu dass die Kompilierung nicht überall gleich gut funktionierte, oder dass Änderungen direkt in die css-Datei geschrieben wurden und dann wieder verloren gingen, bzw. dank SVN mühsam in die Sass Datei übertragen werden konnten.

Beim zweiten Projekt fühlte man sich soweit, dass ein CSS Framework als Ruby Gem genutzt wurde und auch hier war die Gefahr des Vergaloppieren groß.

Mittlerweile schreibe ich nur noch Sass und habe Wege gefunden und beschreibe im folgenden Wege wie man die Technologie einem ganzen Team mit gemischten Hintergrund (Designer, Markup Artist, Entwickler) zugänglich machen kann.

 

Schritt 1: Einrichtung von Sass und Compass auf allen Arbeitsplätzen

Auf der Sass Installationsseite und der Compass Seite wird die Installation für alle gängigen Betriebssysteme (Win, Mac, Linux) erklärt. Vom Einsatz eines GUI-Tool rate ich jedem ab, mit einer geschickten Konfiguration kann man seinen gewohnten Arbeitsablauf (IDE/Editor usw.) beibehalten und ein kleines Terminal Fenster erledigt alle Sass-Aufgaben.

Am Ende von Schritt 1 muss auf jedem Arbeitsplatz der Befehl compass watch ausführbar sein, auch auf dem Entwicklungssystem und dem Produktivsystem.

 

Schritt 2: Konfiguration des Projektes

Das Code Repository muss so angelegt sein, dass jedes Teammitglied, nach einem Checkout im Wurzelverzeichnis des Projektes den Befehl compass watch aufrufen kann und ab diesem Zeitpunkt sich wieder der Sass Entwicklung widmen kann.

Dazu gesellt sich die config.rb an die Seite des Entwicklers, eine simple Textdatei im Wurzelverzeichnis in der ein paar Variablen festgelegt werden:

http_path = "/"
css_dir = "css" # Verzeichnis in dem nachher das CSS laden soll: zum Beispiel "webroot/css"
sass_dir = "sass" # Verzeichnis in dem die scss Dateien liegen
images_dir = "img"
javascripts_dir = "js"

output_style = (environment == :production) ? :compressed : :expanded # Steuerung über das Format des erzeugten CSS

Die letzte Zeile hat es in sich, mit folgenden compass watch Befehlen, kann hier direkt minifiziertes CSS für das Produktivsystem oder lesbares CSS für die Entwicklung erzeugt werden:

compass watch -e production --force // erzeugt miniziertes CSS
compass watch // bringt menschenlesbares und debugbares CSS zu Tage

Schritt 3: Arbeiten mit Sass

Nachdem diese Hürde genommen ist kann die Arbeit mit Sass durch starten. Die grundlegende Technik (Schachteln von CSS Regeln) muss jedem Teammitglied erklärt werden sowie die Funktion der &– und @extend Funktion. Eine Sass Schulung wie sie zum Beispiel bei Code School angeboten wird kann hier hilfreich sein. Wie bei jeder neuen Technik unterscheiden sich die Lernkurven innerhalb eines Teams und daher sollte man schauen dass die Technik langsam Einzug hält und nicht zu abgefahrene Nutzung von @mixins und @functions Mitglieder ausschließt.

Ein nettes Gimmick während der Entwicklung bietet auch die // und /* ... */ Kommentarfunktionen in Sass. Der // Kommentar, weist den Compiler an, diese Zeile zu ignorieren, während der /* ... */ Kommentar in der kompilierten Datei erscheint.

Tipp: Comeback der @import Regel

Jeder Web Performance Optimierer hasst die @import Regel die immer noch in CSS Dateien vorkommt. Doch bei Sass feiert diese Regel zurecht ein Comeback. Der Compiler von Sass erkennt die @import Aufrufe und kopiert daraufhin die genannte Datei in die zu kompilierende Scss Datei, bevor er sie dann komplett kompiliert.

Dadurch kann ein Projekt beliebig viele verschiedene Sass Dateien benutzen, die in der Ausspielung alle in einer CSS Datei zusammengefasst sind. Wenn das ganze noch minifiziert ist, ist ein großer Schritt in der WPO einfach so erledigt.

// Beispiel app.scss
@import "video";
@import "bootstrap";

// ab hier folgen eigene Style Definitionen
.. {
 &:...{

 }
 .. {

 }
}

Mit diesen Angaben sucht der Compiler nach folgenden Dateien: video.scss, _video.scss, bootstrap.scss, _bootstrap.scss und bindet diese im Erfolgsfall ein. Der Unterstrich im Dateinamen weist den Compiler außerdem noch dazu an, die Datei nur einzubetten und nicht selbst zu kompilieren. Ohne Unterstrich enstehen im /css/ Verzeichnis auch die Dateien video.css und bootstrap.css.

Tipp: Einbindung von Frameworks per Sass

Die Technik habe ich im Abschnitt hier drüber erklärt, aber in der Einleitung habe ich erwähnt dass man viele Dinge auch als Ruby Gem in ein Projekt einbinden kann.

Das haben wir bei einem Projekt getan und Foundation 4 eingebunden. Ungeschickt dabei stellte sich heraus, dass alle Teammitglieder auch das Foundation Gem installiert haben mussten und Gem Versionen die nicht der initial Version (mit der das Projekt gestartet wurde) entsprachen, erzeugten fehlerhaftes CSS.

Dank dieser Erfahrung nutze ich mittlerweile immer die Anpassungsfunktion auf der Website eines Framework Anbieters und binde diese Dateien dann fest in das Projekt ein. Ein Update oder eine Erweiterung des Frameworks kann dann immer über diesen Weg erfolgen, was auf den ersten Blick etwas umständlich erscheint, aber dadurch ist es allen Teammitglieder immer möglich auf ihren Geräten das Projekt selbst zu erzeugen und das ist eine Menge wert.

Sitecheck mit WebCheck

Dank mod_rewrite und ähnlichen Webserver-Modulen hat man die volle Kontrolle über die ausgespielten URLs. Innerhalb einer „SEO„-Maßnahme habe ich bei einem Projekt kürzlich das komplette URL-Schema überarbeitet und am Ende einer solchen Optimierung muss man sich fragen ob die Seite jetzt noch richtig funktioniert.

Natürlich ist es bei einem solchen Eingriff wichtig das man das alte URL-Schema weiterhin unterstützt, optimalerweise mit 301er Redirects zur neuen URL. Eine URL Schema Umstellung ohne Weiterleitungen würde alle Suchmaschinen die ihren Index pflegen wollen verprellen und Besucher die über Bookmarks kommen ebenso.

Auf der Suche nach Link Check Tools bin ich auf „webcheck“ gestossen.

weiterlesen