SASS verwenden

Die sogenannten Propräzessoren sind dafür entwickelt worden, die Arbeit mit CSS einfacher zu machen und gleichzeitig den Funktionsumfang zu erhöhen. Die beiden bekanntesten Propräzessoren sind zweifelsohne SASS und LESS, die sich vor allem in ihrer jeweiligen Syntax unterscheiden. Ich habe mich für SASS entschieden, weil das Framework Foundation, das ich gern verwende, mit SASS arbeitet. Neben SASS gibt es die etwas neuere Variante SCSS, die sich in der Syntax mehr an CSS anlehnt.

Ein Haupthindernis für viele Designer zur Benutzung von SASS (oder SCSS) ist sicherlich, dass die SASS-Datei zu einer css-Datei kompiliert werden muss. Wie man dafür wirklich einfach die Tools bereitstellt und anwendet, möchte ich hier beschreiben.

Zunächst lädt man sich Dart Sass herunter, mit dessen Hilfe man ganz einfach SASS lokal benutzen kann. Die neueste Version erhält man auf GitHub. Dort kann man sich die zu seinem System passende Version herunterladen. Diese zip-Datei muss man entpacken und den darin enthaltenen Ordner dart-sass an einem möglichst leicht zugänglichen Ort auf dem Computer speichern (direkt auf C oder D). Das wird im nächsten Schritt wichtig, weil man dort den Pfad zu diesem Ordner angeben muss.

Nun sollte man in dem Ordner des Projektes, für das man SASS verwenden möchte, zwei .bat-Dateien erstellen: eine, um im Arbeitsprozess eine normale CSS-Datei zu erzeugen und eine, um ganz zum Schluss einmalig eine minimierte CSS-Datei zu erstellen, die man auf den Server lädt. Die beiden Dateien müssen folgenden Code enthalten:

@echo off
c:\dart-sass\sass --watch .:.

für die normale batch-Datei und

@echo off
c:\dart-sass\sass .:. --style compressed

um die minimierte CSS einmalig am Ende des Arbeitsvorganges zu erzeugen. [Wenn man ganz an das Ende noch --no-source-map einfügt, wird die sourcemap-Datei nicht erzeugt, die man meiner Meinung nach nicht unbedingt benötigt.] Der Pfad muss natürlich angepasst werden. Speichert man die CSS-Datei in einem anderen Ordner als die SCSS-Dateien (wegen der besseren Übersicht z. B.), so muss man auch diesen Pfad anpassen: .:. bedeutet, dass die CSS-Datei in demselben Ordner gespeichert wird wie die SCSS-Datei. Möchte man die CSS-Datei in einem eigenen Ordner speichern, muss man schreiben: .:css-ordner, sind auch die SCSS-Dateien in einem anderen Ordner als die bat-Dateien, schreibt man z. B.: app/scss-ordner:styles/css-ordner. Die CSS-Datei heißt immer genauso wie die SCSS- oder SASS-Datei, deswegen muß man als Pfad nur die Ordner angeben, nicht den Dateinamen.

Die erste Datei „bewacht“ sozusagen jede Aktion und erstellt automatisch eine neue CSS-Datei, wenn man an der SASS- oder SCSS-Datei Änderungen vorgenommen hat. Wie man diese Datei benennt, ist egal, wichtig ist die Dateierweiterung .bat.

Um das SASS-Projekt zu starten, doppelklickt man auf die erste .bat-Datei. Es öffnet sich ein Fenster mit einer Kommandozeile, das einem anzeigt, dass der Vorgang nun „bewacht“ wird.

In diese Kommandozeile selber muss man nichts eintragen, allerdings erscheinen dort Fehlermeldungen, was sehr praktisch sein kann.

Nun legt man in einem Quelltexteditor (z. B. Brackets oder Notepad++) eine SASS- oder SCSS-Datei an (xxx.sass oder xxx.scss) und füllt diese mit Variablen, Anweisungen und Berechnungen. Wenn man die Datei speichert (und keinen Fehler gemacht hat), wird im selben Ordner eine CSS-Datei desselben Namens erzeugt. Ganz zum Schluss schließt man diese .bat-Datei (zweimal Ctrl + C oder einfach Klick auf das Kreuz) und öffnet die zweite .bat-Datei durch Doppelklick. Sie schließt sofort wieder, hat aber inzwischen die minimierte CSS-Datei erstellt, die man nun mit der HTML-Datei verlinken und auf den Server laden kann.

Eine schöne Webseite, um sich ersteinmal mit SASS/SCSS auszuprobieren, ist Sassmeister. Und ein gutes (deutschsprachiges) E-Book zum Einstieg in die Materie gibt es von Jonas Hellwig Web Design mit Sass. Eine Einführung in moderne Stylesheets (eBook) für 2,99€ bei kulturbanause.