Artikel lesen

WORKSHOP: CSS-ENTWICKLUNG MIT SASS UND COMPASS
CSS-STYLE: EASY;
Änderungen am Layout bestehender Web-Projekte sind aufwändig und meist mit
Eingriffen in viele einzelne CSS-Dateien verbunden. Hinzu kommen zahlreiche
Dopplungen und möglicherweise noch andere Projekt-Mitarbeiter, die wiederum
eigene Stile pflegen. Die CSS-Präprozessoren Sass und Compass wollen diesen
Aufwand 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 Arbeitsaufwand steigt enorm. Die Formatierungen wiederholen sich häufig, sodass Erweiterungen und Änderungen der CSS Dateien
aufwändig werden und viel Zeit erfordern. Kurz gesagt, man überlegt sich, wie man CSS strukturieren, übersichtlich gestalten, in
Module unterteilen und auch wiederverwendbar machen kann.
Ein möglicher Lösungsansatz sind so genannte Präprozessoren.
Diese haben eine CSS-ähnliche Syntax und erleichtern Entwicklern
das Arbeiten mit CSS-Dateien. Allerdings kann der Browser diese
alternative Syntax nicht interpretieren. Es ist deshalb ein Compiler
nötig, der die Dateien während oder nach der Entwicklung in „normales“, optimiertes und fehlerfreies CSS umwandelt.
SASS
Sass lässt sich auch direkt im Browser
ausprobieren. Einfach Sass- und/oder
CSS-Code eingeben und übersetzen
lassen.
Sass (Syntactically Awesome
Stylesheet) ist einer dieser
Präprozessoren und eine MetaSprache, mit der CSS-Code
strukturiert und flexibel geschrieben, ja fast schon programmiert werden kann. So
gibt es beispielsweise Variablen, Schleifen, dynamische
Berechnungen von Werten und
sogar Funktionen [1].
Mit Sass werden SCSS-Dateien
erstellt. Die SCSS-Syntax baut
auf CSS auf. Das bedeutet, jedes valide CSS kann direkt ohne Anpassungen in eine SCSSDatei übernommen werden;
diese hat die Endung .scss. Insich nun zahlreiche Sprach-Konder Präprozessor in valides CSS
nerhalb dieser Dateien lassen
strukte anwenden, die dann
umwandelt.
Entwickler können grundsätzliche Vorgaben, wie zum Beispiel
Farben, Pixelwerte oder auch Schriftarten, an zentraler Stelle in
1
Variablen definieren und dann im weiteren Code verwenden. Somit
lässt sich etwa ein Standard-Padding-Wert definieren, der in weiterer Folge einerseits schlicht verwendet, andererseits aber auch
fü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 zusammengehörige Styles innerhalb eines Blocks darstellen lassen.
CSS VERSCHACHTELN
.header {
width: 100%;
.logo {
width: 150px;
background-color: red;
}
}
Listing 3
© 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 Mixins. Damit können Webentwickler CSS-Code quasi programmieren: Man deklariert einen Mixin (vergleichbar mit einer Funktion),
welcher sich optional auch mit Argumenten versehen lässt und
ruft diesen dann per @include in der Style-Zuweisung eines anderen Elements auf. Dieses Element erhält dann zusätzlich die im
Mixin angegebenen Styles; die Mixin-Styles werden also sozusagen
„hineingemischt“ – daher die Bezeichnung.
jetzt sehr einfach abschließen: „gem install sass“ installiert zunächst Sass, „gem install compass“ im Anschluss daran Compass.
Mac
Ruby ist auf dem Mac bereits installiert, sodass Sass und Compass
direkt installiert werden können. Im Terminal erledigen das die
Befehle „sudo gem install sass“ und „sudo gem install sass“.
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 Übersichtlichkeit
oder einfach nur der Modularität und Wiederverwendbarkeit wegen, einzelne SCSS-Dateien auslagern und nur bei Bedarf importieren. Wichtig ist dabei im Grunde nur, dass zwar die Dateinamen
mit einem Unterstrich beginnen, der Name in der Import-Anweisung den Unterstrich aber nicht mitführt. Der Unterstrich dient
lediglich dazu, den Sass-Compiler anzuweisen, diese Datei zu ignorieren und nicht automatisch in eine CSS-Datei umzuwandeln.
IMPORT DER DATEI MODULES/_TEXTSTYLES.SCSS
@import "modules/textstyles";
Listing 5
COMPASS
Compass ist ein CSS3-Framework, welches auf Sass aufsetzt und
eine Menge Werkzeuge, Bibliotheken und nützliche Kleinigkeiten
an Bord hat. Darunter befinden sich etwa Grid-Systeme, Typographie-Helfer, Browser-übergreifende CSS3-Funktionen, Reset-Styles, automatische Generierung von CSS-Sprites oder sogar UIElemente wie etwa Tabs [2].
ENTWICKLUNG MIT SCSS UND COMPASS
Im Folgenden soll nun auf Basis von Sass und Compass eine Demoseite [3] mit zwölfspaltigem Layoutraster, Kopfbereich mit Logo,
Inhalt mit linker Spalte und Hauptinhalt sowie einem Footer mit
drei nebeneinander platzierten Boxen entstehen. Doch bevor es an
die Entwicklung der Site geht, gilt es zunächst, die Arbeitsumgebung vorzubereiten.
Windows
Unter Windows muss zunächst Ruby [4] installiert werden; wichtig
dabei ist, dass die Option „Add Ruby executables to your PATH“
aktiviert ist, damit andere Installationen Ruby später finden können. Nach der Installation lässt sich das auf der Kommandozeile
(cmd) sehr einfach mit dem Befehl „gem -v“ überprüfen. Wird als
Antwort darauf keine Versionsnummer gezeigt, so ist der Pfad
falsch gesetzt und es muss manuell nachjustiert werden. Das passiert unter Computer > Eigenschaften > Erweiterte Einstellungen
> Umgebungsvariablen > Systemvariablen. Der Pfad zum bin/-Verzeichnis im Ruby-Installationsordner muss hier hinzugefügt werden. Mit funktionierendem Ruby lässt sich die Arbeitsumgebung
Die finale Demoseite unseres Workshops.
960 Grid System
Das 960 Grid System [5] ist eine einfache CSS-Bibliothek, die Spalten-Layouts unterstützt und die Entwicklung wesentlich vereinfacht. 960gs hat sich mittlerweile aufgrund seiner einfachen und
kompakten Handhabung als Quasi-Standard für Layoutraster etabliert – im Folgenden wird es deshalb ebenfalls als Grundlage
genutzt.
Die Installation ist auch hier denkbar einfach. Auf der Kommandozeile beziehungsweise im Terminal reicht dafür schlicht der
Befehl „gem install compass-960-plugin“.
Projekt anlegen und überwachen lassen
Im nächsten Schritt wird mit Compass die Projektstruktur erstellt
und Compass angewiesen, diese zu überwachen. Das bedeutet, dass
SCSS-Dateien automatisch zu CSS-Dateien kompiliert werden,
quasi „on the fly“. Die Befehle werden erneut auf der Kommandozeile ausgeführt und inkludieren auch die Anweisung, 960gs zu
verwenden. Compass erstellt dann das Verzeichnis „my_project“
und überwacht dieses.
PROJEKT ANLEGEN UND ÜBERWACHEN
compass create -r ninesixty path/to/my_project --using 960
compass watch path/to/my_project
Listing 6
Kurz erwähnt sei an dieser
Stelle die Konfigurationsdatei
config.rb. Sie enthält den Projektpfad und einige andere
Konfigurationsoptionen.
So
lässt sich dort beispielsweise
festgelegen, dass CSS-Code in
minimierter Form erstellt werden soll.
Das mit Compass frisch erstellte ProDie automatisch erstellten Dajektverzeichnis des Demoprojekts.
teien text.scss und text.css benötigen wir für das Demoprojekt nicht und löschen sie deshalb. Stattdessen legen wir eine Datei
im sass/-Verzeichnis mit dem Namen „_base.scss“ für unsere
grundlegenden Style-Deklarationen an. Zur Erinnerung: Der Unterstrich am Anfang des Dateinamens weist Sass an, hier nicht
aktiv zu werden und die Datei entsprechend nicht in CSS umzuwandeln.
© 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 einige
beispielhafte Auszüge, welche demonstrieren, wie einfach sich
Spalten-basierte Layouts unter Einsatz des Compass-960-GridSystems 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);
}
FAZIT
Sass und Compass nehmen dem Entwickler zwar nicht die komplette Arbeit ab, sind jedoch durchaus eine große Hilfe im Bereich
der Frontend-Entwicklung. Neben der Zeitersparnis können Webentwickler so den Code ihrer Websites übersichtlich gestalten und
auf ständig weiterentwickelte Bibliotheken zurückgreifen.
Aufgrund der Tatsache, dass valides CSS direkt in SCSS-Dateien
übernommen werden kann, lohnt sich entsprechend der Umstieg
bereits bestehender Projekte. Und auch für den Einsatz in kleineren
oder statischen Websites ist der Einsatz bereits lohnenswert, zumal
es schon eine Erleichterung sein kann, einen Farbcode nur einmal
und nicht zweimal zu ändern. ↔
LINKS
[1]
[2]
[3]
[4]
[5]
↗ Artikel diskutieren und alle Links auf t3n.de/3263
Sass: http://sass-lang.com/
Compass: http://compass-style.org/
Projektdatei zur Demo-Seite: http://t3n.me/demo-sass
Ruby-Installer für Windows: http://rubyinstaller.org/
960 Grid System: http://960.gs/
EMRULLAH DEMIR realisiert seit vielen Jahren
als Webentwickler bei der S2 INTERMEDIA
GmbH zahlreiche Internetprojekte. In diesem
Umfeld beschäftigt er sich umfassend mit
dem Thema der Frontend-Entwicklung und
verfolgt aufmerksam Neuerungen auf dem
Markt.
.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
3
© yeebase media 2012. Veröffentlichung und Vervielfältigung nur mit Genehmigung der yeebase media GmbH. http://t3n.de