Mit SASS lässt sich CSS leichter und kompakter schreiben. Die Stylesheet-Sprache kann aber nicht wie herkömmliches CSS direkt vom Browser gelesen werden, sondern benötigt einen Compiler, der aus SASS das CSS generiert.
In meinem Beispiel verwende ich das einfach zu installierende Koala. Dieses Programm ist für OSX, Windows und Linux verfügbar.

Infos zu: Koala
Infos zu: SASS

Hier nun die paar wenige Schritte:

a) Installieren

b) Programm öffnen: Die Bedienung ist sehr einfach gehalten. Links oben sehen wir ganze 3 Menüpunkte.
1) Filestruktur
2) Fehlerprotokoll
3) Einstellungen

c) Konfiguration. Unter Allgemein kann man sich sogar die deutsche Sprache einstellen. Unter SASS sollte man auf jeden Fall den Autoprefix anhaken. Dieser ergänzt das Stylesheet von Browsereigenen Erweiterungen.

d) nun ein Verzeichnis anlegen mit einer Demo HTML Seite und der Stylesheet Datei. Aber nun die Endung „scss“ verwenden. In der HTML Seite die CSS aber noch normal verlinken:

<link href="demo.css" rel="stylesheet" type="text/css">

Koala wird aus demo.scss ein demo.css generieren!

SASS Beispiel

Das war es auch schon mit der Vorbereitung. Jetzt können wir schon gleich mal ein Beispiel ausprobieren.

$meineFarbe1: black;
$meineFarbe2: white;
 
body {
	background-color: $meineFarbe1;
	color: $meineFarbe2;
}

Wir übergeben Variablen mit Farbwerten in den Body. In der HTML Seite noch ein Wort schreiben, damit man die Textfarbe auch erkennen kann. Und das Ergebnis ist eine schwarze Seite mit weißer Schrift.

Wenn wir in Koala auf die SCSS Datei klicken, bekommen wir rechts nochmal die Einstellungen zu sehen. Man sollte „automatische Kompilierung“ anhaken. Somit wird die CSS automatisch erzeugt. (siehe Bild)

KOALA Sass Konfiguration

Ruhig mal etwas Fehlerhaftes schreiben, um zu sehen, wie die Fehlermeldung erzeugt wird. Der zweite Menüpunkt gibt das Fehlerprotokoll aus.

Nach Änderungen im SASS Code reicht es aus, den Browser mit der HTML Seite einfach wieder zu aktualisieren.