Kategorien
Programmierung

Sass ohne Ruby

War Ruby Sass bis Anfang 2019 noch das Mittel der Wahl, wenn es um die Syntactically Awesome StyleSheets ging, gilt seit einigen Monaten:

Ruby Sass was the original implementation of Sass, but it reached its end of life as of 26 March 2019. It’s no longer supported, and Ruby Sass users should migrate to another implementation.

Die offizielle Referenz-Implementierung ist seither als Dart Sass erhältlich, sofern es aber lediglich um die Wandlung von scss-Files in css-Stylesheets geht, scheint LibSass in Kombination mit SassC ebenfalls eine gute Alternative.

SassC ist in den offiziellen Debian-Paketquellen enthalten, so daß ein einfaches

$ sudo apt install sassc

reicht, um die beiden Pakete „libsass1“ sowei  „sassc“ herunterzuladen und zu installieren.

Was SassC in der Grundausstattung fehlt, ist die „–watch“-Option von Ruby Sass, diese kann allerdings mit einer einfachen „while“-Schleife und den „inotify-tools“ auf der Kommandozeile oder in einem Shell-Skript nachgebildet werden:

$ while inotifywait -e close_write style.scss; do sassc --style compact style.scss style.css ; done

Das in den „inotify-tools“ enthaltene „inotifywait“

efficiently waits for changes to files using Linux’s inotify interface. It is suitable for waiting for changes to files from shell scripts.

wartet mit dem Parameter „-e close_write“, bis die überwachte Datei „style.scss“ nach dem Öffnen im Schreibmodus wieder geschlossen wurde und übergibt in der „while“-Schleife dann an „sassc“, welches die soeben geänderte Datei verarbeitet.

 

Kategorien
Programmierung

Stylesheets aufräumen mit SASS

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.

Kategorien
Programmierung

Sass unter Debian

sassUm Sass, die Syntactically Awesome Style Sheets unter Debian in Betrieb zu nehmen, gibt es mehrere Möglichkeiten:

Die erste und einfachste ist die Installation des Pakets „ruby-sass“. Den Vorteil, daß die Installation ausschließlich unter Verwendung des Debian Paketmanagers distributionskonform erfolgt, erkauft man sich durch den Nachteil, daß mangels passendem „Listener“-Paket die automatische Verzeichnisüberwachung durch Sass nicht möglich ist.

Alternativ kann zuerst die Ruby-Umgebung mit Hilfe des Debian-Paketmanagers eingerichtet werden, bevor Sass mitsamt den benötigten Paketen über das Ruby-eigene Paketsystem RubyGems installiert wird.

Zur Installation der Umgebung genügt das Installieren der Pakete

apt-get install ruby ruby-dev build-essential

anschließend steht alles zur Verfügung um mittles

gem install sass

zuerst Sass und anschließend durch

gem install rb-inotify

auch den Listener für die Verzeichnisüberwachung herunterzuladen und zu installieren.