Dynamische Stylesheets mit SASS

Tutorial zu SASS - Dynamisches CSS - inklusive Netbeans-Einrichtung

In dem folgenden Artikel finden Sie eine Einleitung in dynamische Stylesheets. Sie erfahren wie Sie SASS in NetBeans einrichten und benutzen. Erhöhen Sie die Wiederverwertbarkeit und Wartung Ihrer Layouts.

Was sind dynamische Stylesheets?

Dynamische Stylesheets ermöglichen es statt statischem CSS entweder zur Laufzeit oder vorkompiliert Variablen in CSS Stylesheets zu verwenden.
Das hat den großen Vorteil das Änderungen – zum Beispiel das ändern Akzentfarbe - nur einmalig bekanntgegeben werden müssen und nicht an jeder verwendeten Stelle. Sie können es auch verwenden um generelle Layouts zu erstellen die Sie dann in mehreren Anwendungen verwenden können. Dazu legen Sie einfach entsprechende Variablen an die Sie dann bei der Verwendung des Layouts mit Werten füllen.

Variablen in CSS

Variablen müssen zunächst definiert bzw. mit einem Wert befüllt werden um Sie dann im späteren dynamischem Stylesheet verwenden zu können.
Variablen müssen ein führendes $ erhalten (wie in PHP) dann folgt der eigentliche Name der Variable, dann ein Doppelpunkt dem die Wertzuweisung folgt und zum Abschluss ein Semikolon: $hintergrundfarbe: #ffffff;. In diesem Beispiel wurde der Variable $hintergrundfarbe die Farbe weiß zugewiesen.

Verwendung der Variablen in CSS

Die vorher definierten Variablen können Sie jetzt beliebig oft in Ihren eigentlichen Stylesheets verwenden. Um das Hintergrundfarbe-Beispiel fortzuführen: #navigation { background: $hintergrundfarbe; }. Natürlich können Sie diese Variablen auch nutzen um Schriftarten, Breiten, Höhen oder sonstige Werte zu speichern und als Variable im Stylesheet verwenden.

SASS mit NetBeans 8.0 benutzen

Wir empfehlen einen Ordner anzulegen (zum Beispiel sass) der nicht im Web erreichbar ist. Dort können Sie eine neue Datei anlegen Sass File…. In dieser Datei schreiben Sie ihr gewohntes Stylesheet (und können die Variablen deklarieren und verwenden).
Damit diese automatisch von NetBeans kompiliert werden können Sie den CSS Preprocessor der mit NetBeans geliefert wird verwenden. Öffnen Sie dazu die Project Properties Ihres Projektes und wählen Sie dann CSS Preprocessors. Im Reiter Sass fügen Sie nun den Ordner in dem Ihre SASS Dateien liegen (sass) als Input und als Output den Ordner in dem die fertig kompilierten CSS Dateien landen sollen. Diesen Ordner bzw. die kompilierten CSS Dateien binden Sie dann wie gewohnt in Ihr Dokument ein.

Weiterführende Links zu SASS / NetBeans

Variablen sind nicht der einzige Vorteil von SASS. Weitere Möglichkeiten finden Sie im Guide von SASS: Offizieller SASS Guide, http://sass-lang.com/guide
NetBeans Entwicklungsumgebung: NetBeans IDE, https://netbeans.org/