Mit zunehmendem Umfang und steigender Komplexität einer Website, wachsen auch die Stylesheets. Dabei werden schnell die funktionellen Mängel der CSS-Technologie sichtbar, deren Folgen sich häufig in einem unverhältnismäßigen Entwicklungsaufwand widerspiegeln.
Abhilfe schafft hier Sass, ein auf Ruby basierendes Framework, das der Vereinfachung der Entwicklung von CSS-Layouts dient. Unter Anwendung von Sass können Stylesheets definiert und nach CSS kompiliert werden. Konkret bedeutet dies, dass der Webentwickler von den Vorzügen der Spracherweiterung profitieren kann, während dem Browser gewöhnliches CSS ausgeliefert wird. Dabei unterstützt Sass alle bekannten CSS-Funktionen sowie eine Reihe von Erweiterungen, die von Variablen und mathematischen Funktionen, über Verschachtelungen bis hin zu sogenannten Mixins und Selektor-Vererbung reichen.
Als eine Sammlung von Sass-Modulen kommt Compass ins Spiel. Compass stellt eine Vielzahl von Mixins wie Reset-Styles, Clearfixes sowie CSS-Hacks bereit und ermöglicht darüber hinaus das automatische Erstellen von Sprites. Auf Basis dieser Technologie wird nicht nur der Entwicklungsaufwand von CSS-Layout enorm gesenkt, sondern auch die Komplexität der Sass-Module verringert und damit letztendlich die Möglichkeiten zur Wartung optimiert. Ferner enthält Compass Blueprint – eine generische CSS-Layout-Vorlage, mit der in wenigen Minuten verschiedene CSS-Layouts erstellt werden können.
Für alle, die sich selbst ein Bild von Sass und Compass machen möchten, sind nachfolgend Beispiele aufgeführt, die zum Ausprobieren einladen.
Verschachteln von Code
Durch Verschachteln des Codes können nicht nur Codezeilen eingespart werden, sondern zugleich die CSS Dateien besser strukturiert werden.
Sass Code
ul
list-style: none
li
float: left
width: 100px
a
text-decoration: none
CSS Code
ul {
list-style: none;}
ul li {
float:left;
width: 100px;}
ul li a {
text-decoration: none;}Nutzung von vordefinierten Codeschnipseln
Ein gutes Beispiel für die Verkürzung des zu schreibenden Codes ist Cross-Browser-Kompatibilität. Nehmen wir zum Beispiel das Erzeugen von „runde Ecken“. Um alle Browser zu bedienen, war es bislang erforderlich, sehr viele Codezeilen zu schreiben.
#border-radius {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;}In Sass machen wir uns stattdessen einfach vordefinierte Module von Compass zunutze:
@import compass
#border-radius
+border-radius(5px)
Variablen
Um den Vorteil von Variablen zu erläutern, können wir gleich bei dem obigen Beispiel bleiben. Angenommen wir schreiben Code für eine Seite, die sehr viele „runde Ecken“ mit immer den gleichen Abmessungen verwendet. Um Entwicklungszeit einzusparen, kann der Wert der Rundungen vordefiniert werden. Dazu müssen zu Beginn des Dokuments lediglich Variablen für wiederkehrende Werte bestimmt werden. Von dieser Funktion profitiert man auch beim Organisieren von Farbwerten. So können globale Änderungen von Farben vorgenommen werden, indem einfach die entsprechende Variable angepasst wird. Eine langwierige Suche danach, wo überall im Code der Farbwert verwendet wird, bleibt damit erspart.
@import compass
$border-radius-default: 5px
#border-radius
+border-radius($border-radius-default)
Mixins
Was ist aber wenn nicht nur der Radius immer derselbe ist, sondern auch bspw. die Größe der Box und die Farbe? Auch dafür gibt es eine Lösung, sogenannte Mixins. Hierbei handelt es sich um die Möglichkeit, selbst Codeschnipsel zu definieren, um diese später beliebig zu laden:
@import compass
@mixin default-border-radius
+border-radius(5px)
height: 120px
width: 200px
color: #cdcdcd
#border-radius
+default-border-radius
Extend
Mit Extend kann die Formatierung eines Elementes in ein anderes übertragen und erweitert werden.
@import compass
#border-radius
+border-radius(5px)
#second-border-radius
@extend #border-radius
border-color: #000000
Der obige Sass-Code würde zu folgendem CSS-Code kompiliert werden:
#border-radius,#second-border-radius {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;}
#second-border-radius {
border-color: #000000;}Gridbasierte Layouts erstellen
Eine große Erleichterung bietet Sass auch hinsichtlich gridbasierten Layouts. Es genügen Angaben zur maximalen Spaltenanzahl, Spaltenbreite und Spaltenabstand. Die Rechenarbeit übernimmt Compass. Im Anschluss muss nur noch bestimmt werden, wie viele Spalten ein Container nutzen soll.
@import compass/layout/grid-background
$blueprint_grid_columns: 8
$blueprint_grid_width: 40px
$blueprint-grid-margin: 10px
@import blueprint
.two-col
+container
background-color: #ccc
#header, #footer
+column(8)
#sidebar
+column(3)
#content
+column(5, true)
Das erzeugte CSS sieht wie folgt aus:
.two-col {
width: 390px;
margin: 0 auto;
overflow: hidden;
*zoom: 1;
background-color: #cccccc;}
.two-col #header, .two-col #footer {
display: inline;
float: left;
margin-right: 10px;
width: 390px;}
* html .two-col #header,* html .two-col #footer,
* html .two-col #content,* html .two-col #sidebar {
overflow-x: hidden;}
.two-col #sidebar {
display: inline;
float: left;
margin-right: 10px;
width: 140px;}
.two-col #content {
display: inline;
float: left;
margin-right: 0;
width: 240px;}Das oben aufgeführte Beispiel geht von festen Größen für die Breite einer Spalte aus. In Bezug auf responsive Webdesign, lohnt es sich auch die Erstellung von Grids mit Prozentangaben zu betrachten.
Sprites erstellen mit Hilfe von Compass
Um Speicherplatz zu sparen, ist es sinnvoll Icons als Sprites abzuspeichern. Bislang bedeutete dies im Vorfeld selbst ein Spriteimage mit einem geeigneten Grafikprogramm zu erstellen. Dieser Arbeitsschritt kann unter Nutzung von Compass eingespart werden, da Compass selbst die Erstellung von Sprites vornimmt.
Dazu wird im ersten Schritt innerhalb des images-Ordners ein weiterer Ordner angelegt (im Beispiel "sprite-test"). In diesen Ordner werden alle Bilder, welche zu einem Sprite zusammengeführt werden sollen, abgespeichert. Hierbei gilt es zu beachten, die Dateien im .png-Format abzuspeichern. Andere Bildformate werden nicht unterstützt. Im Anschluss sind noch folgende Angaben notwendig:
@import "sprite-test/*.png"
@include all-sprite-test-sprites
Kompiliert sieht der Code wie folgt aus:
.sprite-test-delete,.sprite-test-like,.sprite-test-mail,
.sprite-test-ok,.sprite-test-smile {
background: url('/images/sprite-test-s6de88e311d.png') no-repeat;}
.sprite-test-delete {
background-position: 0 -133px;}
.sprite-test-like {
background-position: 0 -200px;}
.sprite-test-mail {
background-position: 0 -262px;}
.sprite-test-ok {
background-position: 0 0;}
.sprite-test-smile {
background-position: 0 -70px;}
Die generierten Klassen können nun bequem vergeben werden.
Wichtig ist in diesem Zusammenhang nachfolgende Angabe in der config.rb:
relative_assets = true
Dies ermöglicht Compass das Erstellen von relativen Pfadangaben.
Die obigen Ausführungen machen deutlich, welche Potentiale mit der Anwendung von Sass bzw. Compass erschlossen werden können. Für weiterführende Informationen lohnt es sich, die folgenden Websites zu besuchen: