Drupal 7 Compass und SASS mit Sasson

BLOG

Eine einfache Lösung um mit Drupal 7 Compass und SASS zu verwenden. Ohne Aufwendige Installation auf dem Server und auch ohne Kommandozeile.

LESS Logo

CSS Preprocessing ist in aller Munde, allerdings wird einem der Einstieg nicht leicht gemacht. Gerade als Designer hat man nicht immer einen Root Server mit ausreichend rechten zur Hand um Compass zu installieren, mal abgesehen vom dafür benötigten Know How. Aber es geht natürlich auch einfacher denn es gibt das Drupal-Theme „Sasson“. Hier ist alles bereits enthalten. Der Sass Compiler & das Compass Framework sind über eine modifizierte PHamlP eingebunden. (kann man aber auch abstellen wenn Compass auf dem Server installiert ist) Das einzige was also zu tun ist, ist ein Subtheme anzulegen und schon kann man die Vorteile von Compass und SASS genießen. Wer Drush benutzt kann einfach mittels -- drush sns="Mein Theme" -- sein Subtheme anlegen. Ein Subtheme ist aber auch bereits vorhanden - kopieren, umbenennen, loslegen!

​Jeder der schon mal SCSS geschrieben hat möchte nicht mehr ohne arbeiten und mal angesehen von der enormen Zeitersparnis macht es auch noch Spaß. SASS genauer zu beschreiben würde diesen Post sprengen. Kann nur sagen: Es lohnt sich wirklich sich genauer damit zu beschäftigen!

Hier einige (optionale) Features von Sasson:

Die große Verbreitung von Mobilen Endgeräten ist in aller Munde. Eine Webseite zu haben die sich den verschieden Bildschirmgrößen anpassen kann ist heute wichtiger denn je. Sasson kommt mit einem Responsive Layout welches komplett über die Theme-Einstellungen konfigurierbar ist. Man kann entweder die Option „Mobile First“ oder „Desktop First“ wählen - alles out of the box.

HTML5 - EmblemHTML5: Umwandlung der Core-Template in HTML5 Markup, <header>, <footer>, <article> für Nodes, <section> für blocks, <aside> für Seitenleisten, <nav> für Menüs etc.

Fluid grid: Sasson enthält ein semantisches Grid-System basierend auf 960gs via Compass.

CSS Reset / Normalisieren: Normalize.css und reset.css sind enthalten darunter ein HTML5-freundliches CSS Reset, Cross-Browser Styling Kompatibilitätsverbesserungen und andere Tweaks & Best Practices aus HTML5 Boilerplate v3.0.2

File Watcher: - Änderungen sieht man in Echtzeit. Sasson aktualisiert automatisch den Browser, wenn sich eine Stylesheet Datei (oder jede andere Datei) ändert.

Lightweight: Sasson kommt NICHT mit einem Haufen von CSS-Regeln die erst überschrieben werden müssen.

Adaptive Grid: in den Theme-Einstellungen kann man die Gesamtbreite des Grid wählen, die Anzahl der Spalten und die Stegbreite

Google Webfonts: Einfach in den Theme-Einstellungen die gewünschte Schrift hinzufügen. (Copy und Paste vom Schriftnamen) - und schon fertig. Man braucht keine zusätzlichen Module mehr!

Draggable Overlay-Bild: Kann für eine genau Anpassung des Layouts eingeschaltet werden. (Ähnlich wie Pixel Perfect)

Grid Hintergrundbild: für eine einfache Ausrichtung von Elementen am Raster. 

Automatisch generierte Image Sprites: und die passenden Stylesheets einfach aus einem Bildordner. Im "image"-Verzeichnis des Sub-Themes sind bereits drei Ordner vorhanden (horz, vert, und smart), alles was man tun muss ist entsprechende Bilder innerhalb dieser Verzeichnis abzulegen und in der Sass-Datei anzugeben.

@import "sprites/DIRNAME";
   .selector {
     @include sprite-DIRNAME-FILENAME;
   }

Compass URL Hilfsfunktionen: konfigurierbar in den Theme-Einstellungen. Pfade für /images, /Fonts und / styles. Sehr hilfreich wenn sich die URL ändert. Die Einbindung von Fonts würde in der SCSS Datei dann z.B. so aussehen:

@font-face {
    font-family: 'FontAwesome';
    src: font-url('fontawesome-webfont.eot') format('eot'), 
         font-url('fontawesome-webfont.woff') format('woff'), 
         font-url('fontawesome-webfont.ttf') format('truetype'),
         font-url('fontawesome-webfont.svg') format('svg');
         font-weight: normal;
         font-style: normal;
    }

 

CSS3-Eigenschaften: wie 'border-radius', 'box-shadow' etc. können in der Standard-Form geschreiben werden. Herstellerspezifische Präfixe werden automatisch hinzugefügt (-moz, -webkit ect.).

Mobile viewport: Sasson setzt „mobile viewport initial scale to 100%“ damit man vernünftig für mobile Versionen entwickeln kann.

Stylesheet Dateien in der .Info Datei laden: hier können Einstellungen wie Media Queries, Browser, Weight eingestellt werden: 


styles[styles/sasson.scss][options][weight] = 1
styles[styles/sasson.scss][options][media] = screen and (max-width:400px)
styles[styles/sasson.scss][options][browsers][IE] = lte IE 7
styles[styles/sasson.scss][options][browsers][!IE] = FALSE

Außerdem

  • Unterstützung für RTL und LTR (Right-To-Left und Left-To-Right)
  • Einbindung von Blueprint
  • FireSASS Unterstützung
  • HTML5 Unterstützung in Oldies (IE 8.6) über HTML5shiv
  • HTML5 Doctype und Meta Content-Typ
  • Search form nutzt das neue input type = "search"-Attribut.
  • Responsive Menüs (mittels jqueryMobileDropdown)
  • WAI-ARIA accessibility
  • HTML5 Boilerplate  (HTML5 Boilerplate ein professionelles HTML/CSS/JS template für eine schnelle, robuste und Zukunftssichere Webseite.)
  • Übergabe von Variablen aus dem Theme-Einstellungen zum sass Compiler –hook_sasson_alter ().
  • Sasson erzwingt die neueste IE-Rendering-Engine (auch im Intranet) & Chrome Frame kann deaktiviert werden.

Tipps

Da SCSS Dateien zu CSS kompiliert werden sollte man gleiche Dateinamen unbedingt vermeiden, da diese sich sonst überschreiben.

Es empfiehlt sich auch die Pfade für Bilder, Schriften und SCSS Dateien im Theme einzustellen da man für die Entwicklung ja oft eine andere URL benutzt.

Während der Entwicklung, sollte der Entwicklungs-Modus eingeschaltet sein (siehe Theme-Einstellungen unter "SASS / SCSS Einstellungen"), für bessere Lesbarkeit gibt es die FireSASS Unterstützung. Für den Livebetrieb muss man natürlich den Entwicklungs-Modus ausgeschalten.