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.

Find As You Type / Autocomplete im Eigenbau (jQuery & yii)

Wir sind uns wohl alle einig: Ein Textfeld auf der eigenen Homepage das nach jedem Buchstaben, der eingegeben worden ist, eine aktualisierte Ausgabe erzeugt ist schön!
Google nennt sowas „Google Instant“, wir nennen es jetzt mal „Finde beim tippen“-Funktion oder so.

Als Ausgangssituation nehmen wir an, wir haben eine Datenbank mit beliebigen Inhalt (zB Blog Beiträge) und nun soll mit einem Textfeld der Titel der Blogeinträge durchsucht werden. Weiterlesen

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

WideImage PHP Bibliothek mit Yii Framework nutzen

Kürzlich bin ich auf die WideImage PHP Bibliothek gestoßen und bin begeistert von ihr.

In einem letzten Projekt habe ich das Yii Framework genutzt und dort die vorhandene Eweiterung „Image“ genutzt. Diese hat mir auch sehr gut gefallen, aber WideImage bietet noch mehr, ist sehr gut dokumentiert und wird aktiv gepflegt.

Vorrausetzung:

Weiterlesen

mySQL WEEK() – ein Spezialist für Spezialfälle

Update: Dominik hat mich in den Kommentaren darauf aufmerksam gemacht, dass man einerseits einen zweiten Parameter der Funktion WEEK mitgeben kann um die Kalenderwochen richtig zu berechnen und anderseits dass die Funktion YEARWEEK() die Lösung meines Problems ist.

Der Originalpost:

Diesen Eintrag schreibe ich eher als Erinnerung an mich selbst, aber vielleicht hilft es ja einem anderen Menschen da draussen auch und dann hat es sich schon gelohnt…

Im Sommer 2010 habe ich in verschiedenen Projekten viel mit mySQL Datumsfunktionen umgesetzt und dort häufig mit Daten und Datenvergleichen gearbeitet.

Weiterlesen

Nutze die Power von mySQL [Nachtrag]

Ich hatte über eine Methode zur Auslagerung von ZMS Inhalten in mySQL geschrieben und mittlerweile habe ich noch folgende Änderungen an diesem Ansatz vorgenommen und ich unterstreiche weiterhin das ich kein Profi in Sachen ZMS bin.

Ich habe Herrn Dr. Frank Hoffmann gefragt ob es weitere Eventhooks gibt, die den kompletten Lebenszyklus eines Objektes im ZMS abbilden und an die man „sich“ hängen kann und – obwohl ich selber im ZMS Quelltext hätte suchen können – hat er mir alle verfügbaren Events aufgelistet. Weiterlesen

YII Ajax Paginierung Controller

Bei meinem letzten Projekt habe ich mit dem großartigen Yii Framework eine Seite erstellt, die einerseits den aktuellen Trends folgen sollte, mir persönlich aber auch wichtig war, dass eine „No-Script“ Variante weitestgehend funktioniert.

Viele Inhalte der Seite sollten blätterbar sein und häufig wurde per Tab Navigationen Inhalt ausgespielt. Spontan fallen einem folgende Möglichkeiten ein: Weiterlesen

Nutze die Power von mySQL

Vorneweg: Ich bin kein Profi bei der Arbeit mit ZOPE/ZMS, aber bei einem aktuellen Projekt wurde mir aufgetragen die dramatische Performance einer ZOPE/ZMS Anwendung zu verbessern.

Als Ausgangsszenario dient eine ZOPE/ZMS Umgebung, die mittels ZEO über 8 ZMS Client auf einer physikalischen Maschine verfügt. Die Idee dahinter ist, das jeder Python Prozess einen CPU Kern nutzen kann / soll.

Die Anwendung hat in verschiedenen Knoten teilweise bis zu 200 Kindknoten und mit allen Knoten addiert kommt das Projekt auf über 1800 Knoten. Anscheinend ist ZOPE/ZMS nicht auf solche Ausmaße ausgelegt, da die Generierung einzelner Seiten bis zu 40 Sekunden in Anspruch nahm.

Weiterlesen