Stylesheets aufräumen mit SASS

11. Dezember 2013 · Programmierung · andreas · Kein Kommentar

SASS, die Syntactically Awesome StyleSheets bieten einiges an Funktionalität, die man sich bereits im Rahmen des CSS1-Standards gewünscht hätte. Wer alle Optionen in Augenschein nehmen will, sollte einen Blick in die offizielle Referenz werfen, dieser Beitrag soll nur einen kurzen Einblick in die Möglichkeiten geben, mit geringem Aufwand die Wartbarkeit von Stylesheets deutlich zu verbessern.

Hierzu wird die Sassy CSS-Syntax (SCSS) verwendet, eine Erweiterung des CSS3-Standards. Jedes valide CSS3-Stylesheet ist auch gleichzeitig ein valides SCSS-Stylesheet und die Änderungen können flexibel auf der Basis bereits bestehender Stylesheets eingearbeitet werden.

Die Konvertierung eines SCSS-Stylesheets in ein CSS-Stylesheet erfolgt durch einfachen Aufruf von “sass”, ggf. ergänzt um ein paar optionale Parameter:

sass --watch sass/style.scss:style.css --style compact --no-cache

Der erste Parameter startet eine Überwachung der Datei “sass/style.scss” auf Veränderungen, die dann direkt in die Datei “style.css” übernommen werden. Der zweite Parameter definiert das Ausgabeformat, hier ist zwischen “nested”, “expanded”, “compact” sowie “compressed” zu unterscheiden. Mit dem dritten Parameter wird das Caching abgeschaltet, das bei einer geringen Anzahl von zu konvertierenden Dateien nicht benötigt wird. Eine komplette Übersicht aller Parameter liefert der Aufruf von

sass --help

Konstanten

Eines der im CSS-Standard fehlenden Werkzeuge sind Konstanten: an einer Stelle einen Wert (z.B. eine Farbe) definieren und dann immer wieder verwenden. Bei Änderungen muss statt einer ausufernden Search-and-Replace-Aktion nur die Konstante angepasst werden und alle Werte sind aktualisiert.

Konstanten werden einfach durch ein Vorangestelltes “$"-Zeichen erzeugt:

$text-color: #666;

.post {
	color: $text-color;
}

wird nach Konvertierung durch sass zu

.post {
	color: #666666;
}

Verschachtelung

Verschachtelungen durch Einrückung sind auch in CSS möglich, haben allerdings nur optische Bedeutung. Mit Hilfe von SASS ist es möglich, auch syntaktisch zu verschachteln, d.h. die Strukturen werden bei der Wandlung in ein Stylesheet entsprechend ihrer Verschachtelung expandiert. Will man innerhalb einer Unterebene auf ein Eltern-Element referenzieren, so wird hierzu das “&"-Zeichen verwendet.

$text-color: #666;
$link-color: #00f;
$link-color-visited: #f00;

.post {
	color: $text-color;

	a {
		color: $link-color;

		&:visited {
			color: $link-color-visited;
		}
	}
}

wird gewandelt in

.post {
	color: #666666;
}
.post a {
	color: blue;
}
.post a:visited {
	color: red;
}

Extend

Oft sollen sich mehrere Elemente Einstellungen teilen. Die einzige Möglichkeit, dies in Standard-CSS sinnvoll zu realisieren ist die Verwendung mehrerer Klassen für ein Element, d.h. diesem z.B. die Klassen “.error” und “.fatal-error” zuzuweisen. Dies funktioniert problemlos, hat aber den Nachteil, daß bei der Verwendung von “.fatal-error” auch immer daran gedacht werden muss, “.error” ebenfalls zu verwenden.

Mit Hilfe von @extend kann der Inhalt einer Definition in einer anderen Definition eingebunden werden.

.error {
	background-color: white;
	border: 1px solid red;
	color: black;
}

.fatal-error {
	@extend .error;
	color: red;
}

wird zu


.error, .fatal-error {
	background-color: white;
	border: 1px solid red;
	color: black;
}

.fatal-error {
	color: red;
}

Import

Mit Hilfe von Import-Anweisungen können verschiedene SCSS-Dateien zu einer Ausgabedatei verschmolzen werden. Dies ist z.B. sinnvoll um Konstanten-Definitionen in eine eigene Datei auszulagern, so daß bei der Bearbeitung nicht immer im Hauptdokument hin- und hergescrollt werden muß.

Mit Hilfe eines dem Dateinamen vorangestellten “_"-Zeichens können Dateien als reine Import-Dateien gekennzeichnet werden, die nicht in eigenständige CSS-Dateien konvertiert werden sollen.

Eine Datei “_definitionen.scss” wird nicht in “definitonen.css” konvertiert, kann aber mittels

@import "definitionen";

aus einer anderen SCSS-Datei importiert werden.