WORKSHOP: CSS-ENTWICKLUNG MIT SASS UND COMPASS

CSS-STYLE: EASY;Änderungen am Layout bestehender Web-Projekte sind aufwändig und meist mitEingriffen in viele einzelne CSS-Dateien verbunden. Hinzu kommen zahlreicheDopplungen und möglicherweise noch andere Projekt-Mitarbeiter, die wiederumeigene Stile pflegen. Die CSS-Präprozessoren Sass und Compass wollen diesenAufwand begrenzen und erlauben eine einfache CSS-Programmierung. Wir zeigen,wie das funktioniert.

TEXT EMRULLAH DEMIR

Sobald eine Webseite umfangreich und deren Inhalt komplex wird,wird das CSS umständlich, unübersichtlich und der nötige Arbeits-aufwand steigt enorm. Die Formatierungen wiederholen sich häu-fig, sodass Erweiterungen und Änderungen der CSS Dateienaufwändig werden und viel Zeit erfordern. Kurz gesagt, man über-legt sich, wie man CSS strukturieren, übersichtlich gestalten, inModule unterteilen und auch wiederverwendbar machen kann.

Ein möglicher Lösungsansatz sind so genannte Präprozessoren.Diese haben eine CSS-ähnliche Syntax und erleichtern Entwicklerndas Arbeiten mit CSS-Dateien. Allerdings kann der Browser diesealternative Syntax nicht interpretieren. Es ist deshalb ein Compilernötig, der die Dateien während oder nach der Entwicklung in „nor-males“, optimiertes und fehlerfreies CSS umwandelt.

SASSSass (Syntactically AwesomeStylesheet) ist einer dieserPräprozessoren und eine Meta-Sprache, mit der CSS-Codestrukturiert und flexibel ge-schrieben, ja fast schon pro-grammiert werden kann. Sogibt es beispielsweise Varia-blen, Schleifen, dynamischeBerechnungen von Werten undsogar Funktionen [1].Mit Sass werden SCSS-Dateienerstellt. Die SCSS-Syntax bautauf CSS auf. Das bedeutet, je-des valide CSS kann direkt oh-ne Anpassungen in eine SCSS-Datei übernommen werden;diese hat die Endung .scss. In-

nerhalb dieser Dateien lassen sich nun zahlreiche Sprach-Kon-strukte anwenden, die dann der Präprozessor in valides CSSumwandelt.

Entwickler können grundsätzliche Vorgaben, wie zum BeispielFarben, Pixelwerte oder auch Schriftarten, an zentraler Stelle in

Sass lässt sich auch direkt im Browserausprobieren. Einfach Sass- und/oderCSS-Code eingeben und übersetzenlassen.

Variablen definieren und dann im weiteren Code verwenden. Somitlässt sich etwa ein Standard-Padding-Wert definieren, der in wei-terer Folge einerseits schlicht verwendet, andererseits aber auchfür Berechnungen herangezogen werden kann.

VARIABLEN

$darkGrey: #A0A0A0;$boxPadding: 10px;$font: Helvetica, Arial, sans-serif;

body { color: $darkGrey; font-family: $font; }

.box { padding: $boxPadding; }

Listing 1

BERECHNUNGEN

.container { width: $pageWidth - $boxPadding * 2;}

Listing 2

Sass erlaubt darüber hinaus das Verschachteln von CSS-Regeln.Dies verbessert die Übersicht im Stylesheet, da sich zusammenge-hörige Styles innerhalb eines Blocks darstellen lassen.

CSS VERSCHACHTELN

.header { width: 100%; .logo { width: 150px; background-color: red; }}

Listing 3

1 © yeebase media 2012. Veröffentlichung und Vervielfältigung nur mit Genehmigung der yeebase media GmbH. http://t3n.de

Eine der mächtigsten Fähigkeiten von Sass sind so genannte Mi-xins. Damit können Webentwickler CSS-Code quasi programmie-ren: Man deklariert einen Mixin (vergleichbar mit einer Funktion),welcher sich optional auch mit Argumenten versehen lässt undruft diesen dann per @include in der Style-Zuweisung eines ande-ren Elements auf. Dieses Element erhält dann zusätzlich die imMixin angegebenen Styles; die Mixin-Styles werden also sozusagen„hineingemischt“ – daher die Bezeichnung.

MIXIN-DEKLARATION UND -AUFRUF

@mixin addBorder($width, $color) { border: $width $color solid; }

.footer { @include addBorder(2px, $darkGrey); // andere Style-Zuweisungen...}

Listing 4

Schließlich lassen sich, im Sinne einer besseren Übersichtlichkeitoder einfach nur der Modularität und Wiederverwendbarkeit we-gen, einzelne SCSS-Dateien auslagern und nur bei Bedarf impor-tieren. Wichtig ist dabei im Grunde nur, dass zwar die Dateinamenmit einem Unterstrich beginnen, der Name in der Import-Anwei-sung den Unterstrich aber nicht mitführt. Der Unterstrich dientlediglich dazu, den Sass-Compiler anzuweisen, diese Datei zu igno-rieren und nicht automatisch in eine CSS-Datei umzuwandeln.

IMPORT DER DATEI MODULES/_TEXTSTYLES.SCSS

@import "modules/textstyles";

Listing 5

COMPASSCompass ist ein CSS3-Framework, welches auf Sass aufsetzt undeine Menge Werkzeuge, Bibliotheken und nützliche Kleinigkeitenan Bord hat. Darunter befinden sich etwa Grid-Systeme, Typogra-phie-Helfer, Browser-übergreifende CSS3-Funktionen, Reset-Sty-les, automatische Generierung von CSS-Sprites oder sogar UI-Elemente wie etwa Tabs [2].

ENTWICKLUNG MIT SCSS UND COMPASSIm Folgenden soll nun auf Basis von Sass und Compass eine De-moseite [3] mit zwölfspaltigem Layoutraster, Kopfbereich mit Logo,Inhalt mit linker Spalte und Hauptinhalt sowie einem Footer mitdrei nebeneinander platzierten Boxen entstehen. Doch bevor es andie Entwicklung der Site geht, gilt es zunächst, die Arbeitsumge-bung vorzubereiten.

WindowsUnter Windows muss zunächst Ruby [4] installiert werden; wichtigdabei ist, dass die Option „Add Ruby executables to your PATH“aktiviert ist, damit andere Installationen Ruby später finden kön-nen. Nach der Installation lässt sich das auf der Kommandozeile(cmd) sehr einfach mit dem Befehl „gem -v“ überprüfen. Wird alsAntwort darauf keine Versionsnummer gezeigt, so ist der Pfadfalsch gesetzt und es muss manuell nachjustiert werden. Das pas-siert unter Computer > Eigenschaften > Erweiterte Einstellungen> Umgebungsvariablen > Systemvariablen. Der Pfad zum bin/-Ver-zeichnis im Ruby-Installationsordner muss hier hinzugefügt wer-den. Mit funktionierendem Ruby lässt sich die Arbeitsumgebung

jetzt sehr einfach abschließen: „gem install sass“ installiert zu-nächst Sass, „gem install compass“ im Anschluss daran Compass.

MacRuby ist auf dem Mac bereits installiert, sodass Sass und Compassdirekt installiert werden können. Im Terminal erledigen das dieBefehle „sudo gem install sass“ und „sudo gem install sass“.

Die finale Demoseite unseres Workshops.

960 Grid SystemDas 960 Grid System [5] ist eine einfache CSS-Bibliothek, die Spal-ten-Layouts unterstützt und die Entwicklung wesentlich verein-facht. 960gs hat sich mittlerweile aufgrund seiner einfachen undkompakten Handhabung als Quasi-Standard für Layoutraster eta-bliert – im Folgenden wird es deshalb ebenfalls als Grundlagegenutzt.

Die Installation ist auch hier denkbar einfach. Auf der Kom-mandozeile beziehungsweise im Terminal reicht dafür schlicht derBefehl „gem install compass-960-plugin“.

Projekt anlegen und überwachen lassenIm nächsten Schritt wird mit Compass die Projektstruktur erstelltund Compass angewiesen, diese zu überwachen. Das bedeutet, dassSCSS-Dateien automatisch zu CSS-Dateien kompiliert werden,quasi „on the fly“. Die Befehle werden erneut auf der Kommando-zeile ausgeführt und inkludieren auch die Anweisung, 960gs zuverwenden. Compass erstellt dann das Verzeichnis „my_project“und überwacht dieses.

PROJEKT ANLEGEN UND ÜBERWACHEN

compass create -r ninesixty path/to/my_project --using 960compass watch path/to/my_project

Listing 6

Kurz erwähnt sei an dieserStelle die Konfigurationsdateiconfig.rb. Sie enthält den Pro-jektpfad und einige andereKonfigurationsoptionen. Solässt sich dort beispielsweisefestgelegen, dass CSS-Code inminimierter Form erstellt wer-den soll.Die automatisch erstellten Da-teien text.scss und text.css be-nötigen wir für das Demopro-

jekt nicht und löschen sie deshalb. Stattdessen legen wir eine Dateiim sass/-Verzeichnis mit dem Namen „_base.scss“ für unseregrundlegenden Style-Deklarationen an. Zur Erinnerung: Der Un-terstrich am Anfang des Dateinamens weist Sass an, hier nichtaktiv zu werden und die Datei entsprechend nicht in CSS umzu-wandeln.

Das mit Compass frisch erstellte Pro-jektverzeichnis des Demoprojekts.

© yeebase media 2012. Veröffentlichung und Vervielfältigung nur mit Genehmigung der yeebase media GmbH. http://t3n.de 2

AUSZUG AUS _BASE.SCSS

$baseLineHeight: 20px;$textColor: #444444;$baseFontFamily: Arial, Helvetica, sans-serif;

body { font-family: $baseFontFamily; line-height: $baseLineHeight; color: $textColor;}

Listing 7

Die Datei grid.scss enthält unsere Hauptarbeit. Im Folgenden einigebeispielhafte Auszüge, welche demonstrieren, wie einfach sichSpalten-basierte Layouts unter Einsatz des Compass-960-Grid-Systems realisieren lassen.

TEILE AUS GRID.SCSS

/* Import der benötigten Compass-Module und der _base.scss */@import "960/grid";@import "compass/css3";@import "compass/utilities";@import "base";

/* Header mit Logo und Navigation */.header { // Wendet das Grid System auf das Element an: @include grid-container;

.logo { // Weist dem .logo-Element im Header eine 2-spaltige Breite zu: @include grid(2); }

.navigation { // Das Element soll sich über zehn Spalten erstrecken: @include grid(10); ul { // Horizontales Listen-Layout: @include horizontal-list-container; li { @include horizontal-list-item; } } }}

/* Haupt-Inhaltsbereich */.container { // Wendet das Grid System auf das Element an: @include grid-container;

.sidebar { // Das Element soll sich über vier Spalten erstrecken: @include grid(4); } .content { // Das Element soll sich über acht Spalten erstrecken: @include grid(8); }}

/* Footer */.footer { // Wendet das Grid System auf das Element an: @include grid-container; .box { // Das Element soll sich über vier Spalten erstrecken: @include grid(4); }}

Listing 8

FAZITSass und Compass nehmen dem Entwickler zwar nicht die kom-plette Arbeit ab, sind jedoch durchaus eine große Hilfe im Bereichder Frontend-Entwicklung. Neben der Zeitersparnis können Web-entwickler so den Code ihrer Websites übersichtlich gestalten undauf ständig weiterentwickelte Bibliotheken zurückgreifen.

Aufgrund der Tatsache, dass valides CSS direkt in SCSS-Dateienübernommen werden kann, lohnt sich entsprechend der Umstiegbereits bestehender Projekte. Und auch für den Einsatz in kleinerenoder statischen Websites ist der Einsatz bereits lohnenswert, zumales schon eine Erleichterung sein kann, einen Farbcode nur einmalund nicht zweimal zu ändern. ↔

LINKS ↗ Artikel diskutieren und alle Links auf t3n.de/3263[1] Sass: http://sass-lang.com/[2] Compass: http://compass-style.org/[3] Projektdatei zur Demo-Seite: http://t3n.me/demo-sass[4] Ruby-Installer für Windows: http://rubyinstaller.org/[5] 960 Grid System: http://960.gs/

EMRULLAH DEMIR realisiert seit vielen Jahrenals Webentwickler bei der S2 INTERMEDIAGmbH zahlreiche Internetprojekte. In diesemUmfeld beschäftigt er sich umfassend mitdem Thema der Frontend-Entwicklung undverfolgt aufmerksam Neuerungen auf demMarkt.

3 © yeebase media 2012. Veröffentlichung und Vervielfältigung nur mit Genehmigung der yeebase media GmbH. http://t3n.de