Breite Inhalt
12/12
Breite Layout-Container
Ganze Breite
Spalten Inhalt
12/12
Drupal: Einrichtung einer SASS Entwicklungsumgebung unter Windows für das Theme Omega 4
Im Blogartikel http://www.montviso.de/blog/drupal-10-zukunftsfaehige-themes-die-auch-un... habe ich Drupal Themes beschrieben, die auch unter Drupal 8 funktionieren werden.
Hintergrund war die Frage, ob eine Einarbeitung in Omega 4 ansteht (bislang ist Omega 3 unser Stamm-Theme), oder ob es sinnvollere Alternativen gibt.
Inzwischen habe ich einige der Themes näher angesehen und getestet und bin zu dem Schluss gekommen, daß wir wohl künftig zweigleisig fahren werden.
Für einfachere Anwendungsfälle gefällt mir ZIRCON ganz gut oder auch Bootstrap Business.
Wir haben allerdings immer wieder komplexe Anwendungsfälle, wo man unterschiedliche Layouts benötigt, z.B. weil mit Domain Access unterschiedliche Domainnamen mit abweichendem Design auf einer Installation gepflegt werden sollen.
Wir haben allerdings immer wieder komplexe Anwendungsfälle, wo man unterschiedliche Layouts benötigt, z.B. weil mit Domain Access unterschiedliche Domainnamen mit abweichendem Design auf einer Installation gepflegt werden sollen.
Eine nähere Beschäftigung mit den Themes hat gezeigt, daß hier Omega 4 seine Stärken hat.
Nun kann man ja Omega 4 auch ohne SASS verwenden.
Inzwischen bin ich allerdings auf diese Stylesheet-Sprache neugierig geworden und die Vorteile leuchten mir ein.
Auf SASS gehe ich an dieser Stelle nicht näher ein, dazu gibt es genug Infos im Netz.
Um mit Omega 4 + SASS zu arbeiten, braucht man eine Entwicklungsumgebung mit Ruby 1.9.3 oder höher.
Auf einem Webpaket beim Hoster wird man die nötigen Bausteine nicht unbedingt vorfinden. Bei HostEurope steht z.B. Ruby nur in der Version 1.9.2 zur Verfügung.
Deshalb richte ich die Umgebung auf meinem lokalen Windows 7 Rechner ein.
Zum Testen der Installationsumgebung installiere ich lokal das Backup eines eigenen Drupal-Projekts mit einem Omega 4 Theme.
Erzeugen eines Omega-Subthemes mit Drush:
Dazu wird eine funktionierende Drush-Installation benötigt.
Den Vorgang, wie man Drush unter Windows installiert, habe ich hier beschrieben:
Wenn Drush funktioniert, kann man das Subtheme mit dieser Anleitung
https://www.drupal.org/node/1298676
einrichten, in dem man die geforderten Eingaben auf der Konsole macht.
Dazu einfach auf der Konsole in das sites-Verzeichnis der betroffenen Installation wechseln.
Dabei kann man das Subtheme auch gleich als Standard-Theme für die Seite aktivieren.
Dazu einfach auf der Konsole in das sites-Verzeichnis der betroffenen Installation wechseln.
Dabei kann man das Subtheme auch gleich als Standard-Theme für die Seite aktivieren.
Ab diesem Zeitpunkt könnte man auch einfach wie gewohnt CSS schreiben.
Dabei muß man bedenken, daß es sich bei Omega 4 um ein Fluid Layout handelt.
Im Gegensatz zu Omega 3 gibt es nicht mehr die unterschiedlichen CSS-Dateien für die unterschiedlichen Ausgabebreiten und Media Queries können auch nicht mehr im Adminbereich verwaltet werden.
Das hat zur Folge, daß sehr viel CSS eingespart wird im Vergleich zu Omega 3.
Als Grid-System steht das SASS-basierende SUSY zur Verfügung.
Dabei muß man bedenken, daß es sich bei Omega 4 um ein Fluid Layout handelt.
Im Gegensatz zu Omega 3 gibt es nicht mehr die unterschiedlichen CSS-Dateien für die unterschiedlichen Ausgabebreiten und Media Queries können auch nicht mehr im Adminbereich verwaltet werden.
Das hat zur Folge, daß sehr viel CSS eingespart wird im Vergleich zu Omega 3.
Als Grid-System steht das SASS-basierende SUSY zur Verfügung.
Nicht nur wegen SUSY sondern wegen der einfachen Syntax für Breakpoints (Media Queries) wird dringend empfohlen, die CSS-DAteien mittels SaSS zu erzeugen.
Die dazu notwendigen Schritte werden im Folgenden beschrieben:
Die dazu notwendigen Schritte werden im Folgenden beschrieben:
Installieren von Ruby und Ruby DevKid
- Download von Ruby 1.9.3 unter http://rubyinstaller.org/downloads/ und starten der exe.
Bitte beachten: Der Versuch Ruby 2.0.0. zu verwenden - da ja ausdrücklich neuere Versionen zugelassen sind - ist mit mehreren Fehlermeldungen gescheitert.
Bei der Recherche bin ich auf einen Hinweis gestoßen, daß Ruby 2.0.0 noch nicht offiziell für Windows frei gegeben ist.
Der Hinweis war nicht mehr ganz neu, es kann also sein, daß es bald eine Version 2.0.0 gibt, die auch unter Windows funktioniert. - Im Installations-Fenster einen Haken setzen bei 'Add Ruby executables to your PATH'
- Das voreingestellte Verzeichnis C:\Ruby193\ kann man beibehalten.
Installation des Ruby DevKid:
- Auf der gleichen Downloadseite findet sich auch der Link auf den Download für das DevKid.
- Bitte die Version wählen, die zur gewählten Ruby-Version passt.
- Die Dateien in ein Verzeichnis unter der Ruby-Installation extrahieren, z.B. C:\Ruby193\DevKit
- In der Comand-Line-Konsole folgende Befehle ausführen:
cd /d C:\Ruby192\DevKit ruby dk.rb init ruby dk.rb review ruby dk.rb install
Falls eine Fehlermeldung erscheint, daß der Befehl ruby nicht gefunden werden kann, dann liegt das vermutlich daran, daß der Pfad auf Ruby in den Umgebungsvariablen nicht korrekt angelegt wurde.
Bei mir war der Grund noch trivialer: Ich hatte mein CMD-Fenster bereits vor der Installation geöffnet.
Der Pfad in den Umgebungsvariablen wurde automatisch bei der Installation angelegt, das Comand-Line-Tool wußte aber noch nichts davon.
Deshalb wäre die erste Maßnahme, das Fenster kurz schließen und wieder öffnen.
Bei mir war der Grund noch trivialer: Ich hatte mein CMD-Fenster bereits vor der Installation geöffnet.
Der Pfad in den Umgebungsvariablen wurde automatisch bei der Installation angelegt, das Comand-Line-Tool wußte aber noch nichts davon.
Deshalb wäre die erste Maßnahme, das Fenster kurz schließen und wieder öffnen.
Falls es dann immer noch nicht klappt, muß man den Pfad auf den Ordner C:\Ruby192\bin händisch eintragen.
In manchen Fällen muß man sogar den Rechner neu starten.
In manchen Fällen muß man sogar den Rechner neu starten.
Installation von Pik:
Einfach in der Konsole folgende Befehle ausführen:
gem install pik pik_install C:\Pik setx path '%path%;C:\Pik'
Der letzte Befehl soll den Pfad auf Pik in der Umgebungsvariable setzen.
Deshalb ist danach wieder ein Schließen und Neustarten des Comand-Line-Tools fällig.
Danach wird der Pfad auf Ruby bei Pik bekannt gemacht
pik add C:\Ruby193\bin
Zum Schluss wird Pik noch gesagt, welche Ruby-Version verwendet wird:
pik use 193
Installation von Bundler
Was Bundler ist, kann man hier im Detail nachlesen: http://bundler.io/
Auf der Konsole wird Bundler mit folgendem Befehl installiert:
gem install bundler
Nun muß noch die spezielle Drupal-Omega-Installation für SASS fit gemacht werden.
Dazu wechselt man in der Konsole mit cd auf das Verzeichnis mit des Omega-Subthemes, daß man oben mit Drush erzeugt hat.
Hier wird nun mit folgendem Befehl:
bundle check
getestet, ob die Bundle Abhängigkeiten erfüllt sind.
Falls eine fehlt, werden mit
bundle install
Die fehlenden Bundle installiert.
Bei mir kam es bei der Ausführen der Bundle Installation bei einem Bundler zu folgender Fehlermeldung:
Gem::RemoteFetcher::FetchError: SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: certificate verify failed
Nach einer Recherche im Netz konnte ich den Fehler lösen durch einen Update:
gem update –system
Danach wurde ein zweites Mal bundle install ausgeführt.
Nun kommt die Erfolgsmeldung:
>bundle install Fetching gem metadata from https://rubygems.org/.......... Fetching additional metadata from https://rubygems.org/.. Resolving dependencies... Using addressable 2.3.6 Using sass 3.4.9 Using sassy-maps 0.4.0 Using breakpoint 2.5.0 Installing hitimes 1.2.2 Installing timers 4.0.1 Installing celluloid 0.16.0 Installing chunky_png 1.3.3 Installing coderay 1.1.0 Installing multi_json 1.10.1 Installing compass-core 1.0.1 Installing compass-import-once 1.0.5 Installing rb-fsevent 0.9.4 Installing ffi 1.9.6 Installing rb-inotify 0.9.5 Installing compass 1.0.1 Installing compass-normalize 1.5 Installing compass-rgbapng 0.2.1 Installing compass-validator 3.0.1 Installing css_parser 1.3.5 Installing eventmachine 1.0.4 Installing http_parser.rb 0.6.0 Installing em-websocket 0.5.1 Installing formatador 0.2.5 Installing listen 2.8.4 Installing lumberjack 1.0.9 Installing nenv 0.1.1 Installing method_source 0.8.2 Installing slop 3.6.0 Installing win32console 1.3.2 Installing pry 0.10.1 Installing thor 0.19.1 Installing guard 2.10.5 Installing guard-compass 1.1.0 Installing guard-compat 1.2.0 Installing guard-livereload 2.4.0 Installing guard-shell 0.7.1 Installing oily_png 1.1.2 Installing rb-fchange 0.0.6 Installing sass-globbing 1.1.1 Installing singularitygs 1.4.0 Installing susy 2.1.3 Installing toolkit 2.6.0 Installing yajl-ruby 1.2.1 Using bundler 1.7.10 Your bundle is complete! Use `bundle show [gemname]` to see where a bundled gem is installed. Post-install message from compass: Compass is charityware. If you love it, please donate on our behalf at http:
Damit die Kompilation der SASS-Datei in CSS anspringt, sobald die Datei gespeichert wird, muß noch guard start aktiviert werden
bundle exec guard
Nun können die gewünschten Änderungen im SASS File vorgenommen werden.
Die dadurch erzeugten CSS Files können dann mit FTP auf das Produtktivsystem geschoben werden.
Dort muß also keine SASS Umgebung existieren.
Bitte beachten: Die Konsole muß während der Programmierung mit dem gestarteten guard geöffnet sein.
Hier werden dann auch Kompilierungsfehler genannt.
Bitte beachten: Die Konsole muß während der Programmierung mit dem gestarteten guard geöffnet sein.
Hier werden dann auch Kompilierungsfehler genannt.
Mein erster Versuch bestand darin:
In der Datei
In die Datei \sites\all\themes\\sass\base\_typography.scss habe ich folgenden Code geschrieben, der diese Variablen einbindet.
/** * $FONT-FACE */ @import url(http://fonts.googleapis.com/css?family=Maven+Pro:400,700); @import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic); @include establish-baseline($base-font-size); /** * $BASE-TYPOGRAPHY */ body { background: $dark-grey; } H1{ color: $dark-grey; }
Beim Abspeichern der Datei _typography.scss sp kann man gleichzeitg die Änderungen in der Konsole beobachten, als auch die Veränderung in der CSS-Datei, sofern man sie im Editor offen hat.
Der Eintrag auf der Konsole sieht jetzt so aus:
Abstand Pixel
30
Abstand Pixel
30
Beim ersten Versuch vermisse ich den LiveReload im Browser, der eigentlich die Änderungen sofort anzeigen soll.
In den Einstellungen des Subthemes bei admin/appearance/settings/ ist LiveReload aktiviert.
Es fehlt aber noch das Plugin für den gewünschten Browser. In meinem Fall ist das der FireFox.
In den Einstellungen des Subthemes bei admin/appearance/settings/
Es fehlt aber noch das Plugin für den gewünschten Browser. In meinem Fall ist das der FireFox.
Damit ist die Entwicklungsumgebung fertig und einem tieferen Einstieg in Omega 4 mit SASS steht nichts mehr im Wege.