Das könnte dich auch interessieren

Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

t3n 24

CSS leicht gemacht – wichtige Kniffe für mehr Übersicht

Wer Webseiten baut, kommt an CSS nicht vorbei. Und dank breiter CSS3-Unterstützung der Browser bieten sich die Stylesheets zunehmend für komplexere Aufgaben an, etwa abgerundete Ecken oder Schattierungen. Mit wachsendem Einsatz nehmen aber auch Umfang und Komplexität der CSS-Dateien zu. Höchste Zeit also, die Wartung der Layouts mit Hilfsmitteln zu vereinfachen.

Beim Bau einer CSS-Datei kommt es nicht selten vor, dass man für verschiedene Elemente ähnliche oder gar redundante Anweisungen vornimmt. Bestes Beispiel hierfür sind Farbangaben. Aber auch Angaben für Formatierungen, Abstände oder Größen weisen häufig Abhängigkeiten innerhalb einer oder mehrerer CSS-Dateien auf. Ein Programmierer würde hier wiederkehrende Elemente zentral definieren, Vorlagen verwenden und den eigentlichen CSS-Quellcode anschließend generieren lassen. Genau das ist der Ansatz von Syntactically Awesome Stylsheets (SASS) [1]. CSS-Stylesheets werden um Möglichkeiten erweitert, die Zusammenhänge zwischen verschiedenen Angaben in Form einer eigenen „Sprache“ notieren.

Eines der Ziele bei der Entwicklung der nächsten TYPO3-Generation 5.x (Codename „Phoenix“) war es, wo möglich auf Grafiken zu verzichten und gestalterische Elemente durch die reine Verwendung von HTML und CSS abzubilden. Dies erleichtert dann auch die einfache und zentrale Anpassbarkeit. Entsprechend verwundert es wenig, dass sich die Entwickler entschieden, die CSS-Angaben mit Hilfe von SASS aus zentralen Layout-Definitionen zu generieren.

Bei SASS existieren zwei verschiedene Syntax-Varianten. Die klassische Syntax (Dateiendung .sass) verzichtet auf Klammern und setzt stattdessen auf Einrückungen zur Gliederung von Elementen. Die ab SASS3 unterstützte „SCSS“-Syntax („Sassy CSS“, dt.: freches CSS, Dateiendung .scss) hingegen setzt auf CSS3, verwendet also Klammern und erweitert CSS um zusätzliche Möglichkeiten. Innerhalb eines Projekts ist es auch möglich, SASS- und SCSS-Syntax zu mischen. Je Datei findet aber jeweils nur eine Syntax Anwendung. Im Folgenden liegt der Fokus auf der SCSS-Syntax.

Erste Schritte

Das Werkzeug zur Umwandlung von SCSS/SASS-Code in CSS-Code selbst ist in Ruby geschrieben. Aber keine Angst: Wer das Tool nicht im Kern erweitern, sondern einfach nur nutzen möchte, benötigt keine Ruby-Kenntnisse. Nach Installation des Ruby-Gems „haml“ per „gem install haml“ ist das SASS-Tool auch schon für den ersten Einsatz bereit. Wer ein HAML-Paket seiner Linux-Distribution nutzen möchte, sollte beachten, dass dies die SCSS-Syntax erst ab Version 3.0 unterstützt.

Mit „sass style.scss:style.css“ ist die Konvertierung einer einzelnen Datei möglich. Alternativ können hier auch Quell- und Zielverzeichnis angegeben werden, die dann rekursiv abgearbeitet werden. Mit „sass --watch style.scss:style.css“ ist es außerdem möglich, einen Live-Modus zu aktivieren, bei dem die Quelldateien auf Änderungen beobachtet und die Zieldateien automatisch neu generiert werden.

Wie die Ausgabe aussieht, bestimmt das „--style“-Attribut. Standardmäßig aktiv ist „nested“; Einrückungen also, die die CSS-Hierarchie leserlich darstellen. Alternativ lassen sich die Angaben über „compressed“ auf das Nötigste reduzieren oder mittels „compact“ auf eine Zeile komprimieren.

Variablen

Jede gültige CSS3-Datei ist automatisch auch eine gültige SCSS-Datei. Ein zu Beginn häufig verwendetes Beispiel ist die zentrale Definition von Farben und Größenangaben mit Hilfe von Variablen. Diese werden in der Form „$variablenname“ angegeben, gefolgt von einem Doppelpunkt sowie dem gewünschten Wert, der selbst eine gültige CSS-Angabe ist. Auch ist es möglich, einfache mathematische Konstrukte wie Additionen oder Multiplikationen zu nutzen. Für diverse andere Anwendungen stehen sogar Funktionen bereit, etwa zur Berechnung von Farbwerten.

Variablen und Funktionen

$dark-white: #f1f1f1;
$grey: lighten(#000000, 20%);
$light-grey: #9e9e9e;
$small-radius: 3px;
$mid-radius: 5px;

a.link-help {
	color: $light-grey;
}

div.button {
	width: 20px - 2*$small-radius;
}

Listing 1

Wiederkehrende Angaben lassen sich auch per „mixin“ auslagern und dann über „include“ an verschiedenen Stellen nutzen. Dabei ist die Angabe von optionalen Parametern möglich – ganz im Stil programmierter Funktionen.

Mixin und Include

@mixin rounded-corners-middle-right {
	-moz-border-radius: 0 $mid-radius $mid-radius 0;
	-webkit-border-radius: $mid-radius;
}

@mixin spacing($margin: 5px) {
	margin-right: $margin;
}

.errorMessages {
	@include rounded-corners-middle;
	@include spacing(10px);
	border: 1px solid #000000;
}

Listing 2

Verschachteln

Besonders hilfsreich ist die Verwendung von verschachtelten Angaben. Sie erleichtern den Überblick, geben den Definitionen klare Strukturen und ermöglichen auf einfache Weise beispielsweise die Umbenennung einer class-Angabe.

Einrücken und verschachteln

table.menu {
	background-color: blue;
	td.active {
		font-weight: bold;
		label {
			margin-left:10px;
		}
	}
}

div.headline {
	font: {
		weight: bold;
		size: 1.2em;
	}
}

Listing 3

Ergebnis in CSS

table.menu { background-color: blue; }
table.menu td.active { font-weight: bold; }
table.menu td.active label { margin-left: 10px; }
div.headline { font-weight: bold; font-size: 1.2em; }

Listing 4

Vererben

Vererbung

.important {
	font-weight:bold;
}
.headline {
	font-size:1.2em;
}
.importantErrorheadline {
	@extend .important;
	@extend .headline;
	color: red;
}

Listing 5

Durch die Vererbung von einem oder mehreren Selektoren ist es möglich, selbst komplizierte Abhängigkeiten einfach und strukturiert abzubilden. Auch ist die Vererbung entlang einer Kette von Selektoren ist möglich.

Ergebnis in CSS

.important, .importantErrorheadline { font-weight: bold; }
.headline, .importantErrorheadline { font-size: 1.2em; }
.importantErrorheadline { color: red; }

Listing 6

Auslagern und Einbinden

Wiederkehrende Werte und Definitionen werden bestenfalls bereits zu Beginn ausgelagert. Dies ermöglicht es, die im weiteren Verlauf eines Projekts üblicherweise stetig steigende Komplexität der CSS-Angaben auf ein überschaubares Maß zu reduzieren. Auch lassen sich so Module in verschiedenen CSS-Dateien zentral und einfach wiederverwenden. Dank mathematischer Ausdrücke und Funktionen lassen sich so Ursprungswerte wie die zu verwendende Bildschirmbreite zentral ändern und abhängige Werte automatisch neu berechnen.

Einbinden

@include „Dateiname“;

Listing 7

Beginnt der Dateiname mit einem Unterstrich, signalisiert dies SASS übrigens, dass die Datei nicht in eine eigenständige CSS-Datei zu konvertieren ist. Sie wird stattdessen lediglich als Modul innerhalb anderer Dateien genutzt.

Fazit

Die Möglichkeit beispielsweise Längen, Abstände und Farben zentral zu definieren erhöht die Übersichtlichkeit bereits enorm [2]. Verbunden mit mathematischen Operationen, Funktionen und wiederverwendbaren Blöcken wird es auf flexible Weise möglich, mit CSS-Angaben zu „programmieren“. Der Funktionsumfang lässt sich zudem durch andere Bibliotheken, etwa Compass [3], erweitern – sie bringen fertige Mixins, Vorlagen und eine wachsende Community. Durch die Generierung von standard-konformem CSS3 lässt sich SASS/SCSS außerdem ohne Anpassung mit allen Browsern nutzen.

Links und Literatur

  1. SASS
  2. Video-Podcast zu SASS
  3. Compass

Finde einen Job, den du liebst zum Thema Webdesign, Webentwickler

Schreib den ersten Kommentar!

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen