<p>Sobald eine Webseite umfangreich und ihre Inhalte komplexer werden, wachsen auch die Stylesheets an. Dabei zeigt sich schnell: CSS ist umständlich und der nötige Arbeitsaufwand steigt unverhältnismäßig. Formatierungen wiederholen sich häufig, sodass Änderungen und Erweiterungen viel Zeit erfordern.</p>
<p>Eine erste Maßnahme ist es, die Formatierungen in Module aufzuteilen. Die Grundmodule nehmen Vereinheitlichungen vor, definieren etwa die Basis-Typographie und bieten wiederverwendbare Styles für Spaltenlayout. Darauf bauen Module auf, die das konkrete Layout und die Inhalts-Container umsetzen. So lassen sich gewisse Wiederholungen vermeiden und Aufgaben entkoppeln. Ein solches <a href="http://www.yaml.de/de/dokumentation/css-bausteine/allgemeines.html">Baukastensystem</a> findet sich beispielsweise beim <a href="http://www.yaml.de/">YAML-Framework</a>.</p>
<p>Diese Arbeitsweise stößt bei wachsender Projektgröße an ihre Grenzen. Ein Lösungsansatz ist <a href="http://www.webkrauts.de/2009/07/06/objektorientiertes-css-eine-einfuehrung/">Objektorientiertes CSS (OOCSS)</a>, ein radikaleres Konzept zur Modularisierung. Module werden streng mit Klassenselektoren definiert und im HTML durch mehrere Klassen angewendet. Ein Nachteil ist, dass mit den Klassen oftmals wieder Informationen zur Präsentation ins HTML gelangen.</p>
Neue CSS-Fähigkeiten durch Präprozessoren
<p>Ein weiterer Lösungsansatz verlagert die Modularisierung auf die Entwickler- bzw. Serverseite. Zunächst wird eine neue Sprache definiert, die CSS sehr ähnelt. Sie vereinfacht die CSS-Syntax und erweitert sie um neue Fähigkeiten. Diese Metasprache wird anschließend von einem Programm, Präprozessor genannt, wieder in normales CSS übersetzt. Während der Webentwickler den Komfort der Spracherweiterungen nutzen kann, bekommt der Browser gewöhnliches CSS geliefert.</p>
Sass – Syntactically Awesome Stylesheets
<p>Mittlerweile gibt es verschiedene ausgereifte CSS-Präprozessoren. Dieser Artikel widmet sich <a href="http://sass-lang.com/">Sass</a>, einer etablierten, leistungsfähigen Software. Sass ist kostenlos und wird aktiv fortentwickelt.</p>
<p>Sass definiert zunächst ein Dateiformat mit der Endung .scss. Webautoren können solche Dateien schreiben, um die Erweiterungen zu nutzen. Zudem besteht Sass aus einem Kommandozeilen-Programm, das .scss-Dateien in gewöhnliche .css-Dateien übersetzt. Immer wenn ein Webworker die Webseite im Browser testet oder auf den Zielserver hochlädt, wird dieser Übersetzer aufgerufen.</p>
<p>Die SCSS-Syntax ist eine Obermenge der gewöhnlichen CSS3-Syntax des W3Cs. Das heißt, ihr könnt bestehende .css-Dateien einfach in .scss umbenennen. Der Sass-Übersetzer versteht diese bereits und wandelt sie in in korrektes CSS um.</p>
<p>Der Standard-Übersetzer von Sass ist in der Programmiersprache Ruby geschrieben. Um diesen auszuführen, bedarf es einer installierten Ruby-Interpreter. Unter Mac OS, diversen Linux-Distributionen und auf Unix-basierten Servern ist Ruby oft vorinstalliert oder lässt sich über Paketmanager schnell installieren. Für Windows existiert ein <a href="http://www.ruby-lang.org/de/downloads/">einfaches Installationsprogramm</a>. Hinsichtlich der genauen Installation und Verwendung des Übersetzers sei auf das offizielle <a href="http://sass-lang.com/tutorial.html">Tutorial</a> sowie die <a href="http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#using_sass">Referenz</a> verwiesen.</p>
<p>Neben der maßgeblichen Ruby-Umsetzung gibt es eine <a href="http://code.google.com/p/phamlp/">PHP-Umsetzung</a>, die die nahtlose Einbindung in verbreitete PHP-basierte Systeme wie TYPO3, WordPress und Drupal ermöglicht.</p>
Compass – CSS 3 effizient anwenden
<p>Während Sass Spracherweiterungen und den passenden Übersetzer bietet, baut <a href="http://compass-style.org/">Compass</a> damit ein Framework. Compass ist quasi die Standardbibliothek für Sass und bietet vieles, was auch gängige CSS-Frameworks enthalten. Sie stellt eine große Anzahl von Mixins zur Verfügung (dazu später mehr), darunter Reset-Styles, Clearfixes sowie bewährte CSS-Hacks. Daneben ermöglicht Compass das automatisierte Erstellen von <a href="http://www.webkrauts.de/2009/12/15/kuerzere-ladezeiten-durch-css-sprites/">CSS-Sprites</a>.</p>
<p>Der Schwerpunkt von Compass liegt darauf, die Anwendung der neuen CSS3-Techniken zu vereinfachen. Compass erlaubt eine einheitliche Schreibweise, die in verschiedene Eigenschaften mit Hersteller-Präfixen übersetzt wird. Damit müssen Entwickler sich keine Gedanken mehr machen, ob sie alle Browser abdecken und die aktuelle, vom W3C empfohlene Schreibweise verwenden. Es reicht, mit einer Codezeile einen Compass-Helfer einzubinden und die Compass-Version aktuell zu halten.</p>
<p>Obwohl Compass eine sehr umfangreiche Bibliothek ist, landen im generierten CSS-Code nur die Teile, die auch tatsächlich genutzt werden. Die eigenen Stylesheets müssen also keine riesigen Dateien einbinden, sondern können punktgenau Compass-Helfer aufrufen. Richtig angewandt kommt der entstehende Code weitgehend ohne Wiederholungen aus.</p>
<p>Im Folgenden lernt ihr die wichtigsten Features von Sass und Compass kennen.</p>
Verschachtelung
<p>Sass erlaubt das Verschachteln von CSS-Regeln. Damit kann die Verschachtelung der Regeln die Verschachtelung der Elemente im HTML-DOM widerspiegeln. Beispiel:</p>
.tabs {
height: 27px;
padding: 0 10px;
li {
float: left;
height: 23px;
overflow: hidden;
padding: 5px 2px 0;
&.active {
height: 24px;
padding: 4px 1px 0;
a {
background: white;
padding: 4px 12px 5px;
}
}
}
}
<p>Der Selektor einer verschachtelten Regel wird mit dem Selektor der darüberliegenden Regeln kombiniert, sodass in der Regel ein Nachfahrensselektor entsteht. Der obige SCSS-Code wird in folgende vier CSS-Regeln übersetzt:</p>
.tabs {…}
.tabs li {…}
.tabs li.active {…}
.tabs li.active a {…}
<p>Das Zeichen & wird durch den Eltern-Selektor ersetzt, sodass dieser z.B. durch eine Klasse oder Pseudo-Klasse eingegrenzt werden kann.</p>
<p>Diese Schreibweise verbessert die Übersicht im Stylesheet, da zusammengehörige Styles in einem Block stehen. Sie verführt Sass-Einsteiger leider dazu, den HTML-Baum im Stylesheet komplett abzubilden. Dies führt lediglich zu komplexen, ineffizienten Selektoren und verhindert Modularisierung. Selektoren sollten so spezifisch wie nötig und so einfach wie möglich sein. Daher lautet eine Grundregel, den Code möglichst wenig verschachtelt zu halten. Dadurch bleibt der Code wiederverwendbar und das Modul ist nicht an einen bestimmten Kontext gebunden.</p>
Variablen
<p>Für ein stimmiges Layout ist es erforderlich, dass Größen, Abstände, Farben und Schriftgrößen über Module hinweg identisch sind. Leider wiederholen sich diese Werte oftmals und werden mit anderen verrechnet, was spätere Änderungen unter Wahrung der Konsistenz sehr schwierig macht. Sass führt Variablen ein, um diesem Problem zu begegnen. Variablen werden global (z.B. in einer zentralen Datei) oder nur für eine Regel und deren verschachtelte Regeln definiert.</p>
// Globale Variablen:
$flashy-green: #80AA00;
$box-background-color: #fff;
$box-border-color: #c7c7c7;
$std-padding: 10px;
// Anwendung:
h1, h2, h3 {
color: $flashy-green;
}
.box {
margin: 0 auto ($std-padding * 2);
border: 1px solid $box-border-color;
padding: $std-padding;
background-color: $box-background-color;
}
.modal {
// Variable für diese Regel
$width: 600px + (2 * $std-padding);
position: absolute;
position: fixed;
top: 20px;
left: 50%;
margin-left: -($width / 2);
border: 5px solid $flashy-green;
width: $width;
padding: $std-padding;
}
<p>Das obige Beispiel zeigt auch, dass ihr mit Variablen rechnen könnt. Im generierten CSS-Code stehen die Ergebnisse dieser Berechnungen.</p>
<p>Morgen folgt der zweite Teil des Artikels.</p>
Zum Autor
<p style="float: left;margin-right: 1em"></p>
<p><a href="http://molily.de/">Mathias Schäfer (molily)</a> arbeitet als Web- und Software-Entwickler für <a href="http://9elements.com/">9elements</a>.</p>
<p>Eine erste Maßnahme ist es, die Formatierungen in Module aufzuteilen. Die Grundmodule nehmen Vereinheitlichungen vor, definieren etwa die Basis-Typographie und bieten wiederverwendbare Styles für Spaltenlayout. Darauf bauen Module auf, die das konkrete Layout und die Inhalts-Container umsetzen. So lassen sich gewisse Wiederholungen vermeiden und Aufgaben entkoppeln. Ein solches <a href="http://www.yaml.de/de/dokumentation/css-bausteine/allgemeines.html">Baukastensystem</a> findet sich beispielsweise beim <a href="http://www.yaml.de/">YAML-Framework</a>.</p>
<p>Diese Arbeitsweise stößt bei wachsender Projektgröße an ihre Grenzen. Ein Lösungsansatz ist <a href="http://www.webkrauts.de/2009/07/06/objektorientiertes-css-eine-einfuehrung/">Objektorientiertes CSS (OOCSS)</a>, ein radikaleres Konzept zur Modularisierung. Module werden streng mit Klassenselektoren definiert und im HTML durch mehrere Klassen angewendet. Ein Nachteil ist, dass mit den Klassen oftmals wieder Informationen zur Präsentation ins HTML gelangen.</p>
Neue CSS-Fähigkeiten durch Präprozessoren
<p>Ein weiterer Lösungsansatz verlagert die Modularisierung auf die Entwickler- bzw. Serverseite. Zunächst wird eine neue Sprache definiert, die CSS sehr ähnelt. Sie vereinfacht die CSS-Syntax und erweitert sie um neue Fähigkeiten. Diese Metasprache wird anschließend von einem Programm, Präprozessor genannt, wieder in normales CSS übersetzt. Während der Webentwickler den Komfort der Spracherweiterungen nutzen kann, bekommt der Browser gewöhnliches CSS geliefert.</p>
Sass – Syntactically Awesome Stylesheets
<p>Mittlerweile gibt es verschiedene ausgereifte CSS-Präprozessoren. Dieser Artikel widmet sich <a href="http://sass-lang.com/">Sass</a>, einer etablierten, leistungsfähigen Software. Sass ist kostenlos und wird aktiv fortentwickelt.</p>
<p>Sass definiert zunächst ein Dateiformat mit der Endung .scss. Webautoren können solche Dateien schreiben, um die Erweiterungen zu nutzen. Zudem besteht Sass aus einem Kommandozeilen-Programm, das .scss-Dateien in gewöhnliche .css-Dateien übersetzt. Immer wenn ein Webworker die Webseite im Browser testet oder auf den Zielserver hochlädt, wird dieser Übersetzer aufgerufen.</p>
<p>Die SCSS-Syntax ist eine Obermenge der gewöhnlichen CSS3-Syntax des W3Cs. Das heißt, ihr könnt bestehende .css-Dateien einfach in .scss umbenennen. Der Sass-Übersetzer versteht diese bereits und wandelt sie in in korrektes CSS um.</p>
<p>Der Standard-Übersetzer von Sass ist in der Programmiersprache Ruby geschrieben. Um diesen auszuführen, bedarf es einer installierten Ruby-Interpreter. Unter Mac OS, diversen Linux-Distributionen und auf Unix-basierten Servern ist Ruby oft vorinstalliert oder lässt sich über Paketmanager schnell installieren. Für Windows existiert ein <a href="http://www.ruby-lang.org/de/downloads/">einfaches Installationsprogramm</a>. Hinsichtlich der genauen Installation und Verwendung des Übersetzers sei auf das offizielle <a href="http://sass-lang.com/tutorial.html">Tutorial</a> sowie die <a href="http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#using_sass">Referenz</a> verwiesen.</p>
<p>Neben der maßgeblichen Ruby-Umsetzung gibt es eine <a href="http://code.google.com/p/phamlp/">PHP-Umsetzung</a>, die die nahtlose Einbindung in verbreitete PHP-basierte Systeme wie TYPO3, WordPress und Drupal ermöglicht.</p>
Compass – CSS 3 effizient anwenden
<p>Während Sass Spracherweiterungen und den passenden Übersetzer bietet, baut <a href="http://compass-style.org/">Compass</a> damit ein Framework. Compass ist quasi die Standardbibliothek für Sass und bietet vieles, was auch gängige CSS-Frameworks enthalten. Sie stellt eine große Anzahl von Mixins zur Verfügung (dazu später mehr), darunter Reset-Styles, Clearfixes sowie bewährte CSS-Hacks. Daneben ermöglicht Compass das automatisierte Erstellen von <a href="http://www.webkrauts.de/2009/12/15/kuerzere-ladezeiten-durch-css-sprites/">CSS-Sprites</a>.</p>
<p>Der Schwerpunkt von Compass liegt darauf, die Anwendung der neuen CSS3-Techniken zu vereinfachen. Compass erlaubt eine einheitliche Schreibweise, die in verschiedene Eigenschaften mit Hersteller-Präfixen übersetzt wird. Damit müssen Entwickler sich keine Gedanken mehr machen, ob sie alle Browser abdecken und die aktuelle, vom W3C empfohlene Schreibweise verwenden. Es reicht, mit einer Codezeile einen Compass-Helfer einzubinden und die Compass-Version aktuell zu halten.</p>
<p>Obwohl Compass eine sehr umfangreiche Bibliothek ist, landen im generierten CSS-Code nur die Teile, die auch tatsächlich genutzt werden. Die eigenen Stylesheets müssen also keine riesigen Dateien einbinden, sondern können punktgenau Compass-Helfer aufrufen. Richtig angewandt kommt der entstehende Code weitgehend ohne Wiederholungen aus.</p>
<p>Im Folgenden lernt ihr die wichtigsten Features von Sass und Compass kennen.</p>
Verschachtelung
<p>Sass erlaubt das Verschachteln von CSS-Regeln. Damit kann die Verschachtelung der Regeln die Verschachtelung der Elemente im HTML-DOM widerspiegeln. Beispiel:</p>
.tabs {
height: 27px;
padding: 0 10px;
li {
float: left;
height: 23px;
overflow: hidden;
padding: 5px 2px 0;
&.active {
height: 24px;
padding: 4px 1px 0;
a {
background: white;
padding: 4px 12px 5px;
}
}
}
}
<p>Der Selektor einer verschachtelten Regel wird mit dem Selektor der darüberliegenden Regeln kombiniert, sodass in der Regel ein Nachfahrensselektor entsteht. Der obige SCSS-Code wird in folgende vier CSS-Regeln übersetzt:</p>
.tabs {…}
.tabs li {…}
.tabs li.active {…}
.tabs li.active a {…}
<p>Das Zeichen & wird durch den Eltern-Selektor ersetzt, sodass dieser z.B. durch eine Klasse oder Pseudo-Klasse eingegrenzt werden kann.</p>
<p>Diese Schreibweise verbessert die Übersicht im Stylesheet, da zusammengehörige Styles in einem Block stehen. Sie verführt Sass-Einsteiger leider dazu, den HTML-Baum im Stylesheet komplett abzubilden. Dies führt lediglich zu komplexen, ineffizienten Selektoren und verhindert Modularisierung. Selektoren sollten so spezifisch wie nötig und so einfach wie möglich sein. Daher lautet eine Grundregel, den Code möglichst wenig verschachtelt zu halten. Dadurch bleibt der Code wiederverwendbar und das Modul ist nicht an einen bestimmten Kontext gebunden.</p>
Variablen
<p>Für ein stimmiges Layout ist es erforderlich, dass Größen, Abstände, Farben und Schriftgrößen über Module hinweg identisch sind. Leider wiederholen sich diese Werte oftmals und werden mit anderen verrechnet, was spätere Änderungen unter Wahrung der Konsistenz sehr schwierig macht. Sass führt Variablen ein, um diesem Problem zu begegnen. Variablen werden global (z.B. in einer zentralen Datei) oder nur für eine Regel und deren verschachtelte Regeln definiert.</p>
// Globale Variablen:
$flashy-green: #80AA00;
$box-background-color: #fff;
$box-border-color: #c7c7c7;
$std-padding: 10px;
// Anwendung:
h1, h2, h3 {
color: $flashy-green;
}
.box {
margin: 0 auto ($std-padding * 2);
border: 1px solid $box-border-color;
padding: $std-padding;
background-color: $box-background-color;
}
.modal {
// Variable für diese Regel
$width: 600px + (2 * $std-padding);
position: absolute;
position: fixed;
top: 20px;
left: 50%;
margin-left: -($width / 2);
border: 5px solid $flashy-green;
width: $width;
padding: $std-padding;
}
<p>Das obige Beispiel zeigt auch, dass ihr mit Variablen rechnen könnt. Im generierten CSS-Code stehen die Ergebnisse dieser Berechnungen.</p>
<p>Morgen folgt der zweite Teil des Artikels.</p>
Zum Autor
<p style="float: left;margin-right: 1em"></p>
<p><a href="http://molily.de/">Mathias Schäfer (molily)</a> arbeitet als Web- und Software-Entwickler für <a href="http://9elements.com/">9elements</a>.</p>