Schlagwort: SASS

inotifywait bricht bei Dateiänderungen ab

· · 0 Kommentare

Es gibt verschiedene Strategien, wie die Änderung einer Datei gespeichert werden kann. Die beiden i.d.R. eingesetzten Verfahren sind entweder die vorhandene Datei mit dem neuen Inhalt zu überschreiben oder aber den geänderten Inhalt in eine neue Datei zu speichern und dann die Dateien auszutauschen.

Unter Sicherheitsaspekten ist der Dateiaustausch klar vorzuziehen, denn erst wenn der neue Inhalt erfolgreich in die neue Datei gespeichert wurde, wird die bisherige Datei gelöscht. Beim direkten Überschreiben kann entweder beim Zugriff durch andere Programme eine halbfertige Datei geliefert werden oder es kommt durch Hardware- / Software-Fehler zu einer Situation, in welcher der alte Inhalt bereits zerstört, der neue Inhalt aber nicht erfolgreich geschrieben werden kann.

Dies hat Auswirkungen auf die Möglichkeiten, mittels inotifywait auf Dateiänderungen zu reagieren. Während beim direkten Überschreiben inotifywait ordnungsgemäß eine Änderung der Datei registriert, bricht inotifywait beim Dateiaustausch ab - die z.B. im Beitrag "Sass ohne Ruby" geschilderte Vorgehensweise scheitert dann, da die ursprünglich überwachte Datei ja nicht mehr existiert.

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

Eine Möglichkeit, dies zum umgehen, ist das Überwachen des kompletten Verzeichnisses mit Abfrage der geänderten Datei

inotifywait -e close_write,moved_to,create -m . |
while read -r directory events filename; do
	if [ "$filename" = "style.scss" ]; then
		sassc --style compact style.scss .style.css
	fi
done

was aber - je nach Anzahl der im Verzeichnis vorhandenen Dateien und deren Änderungshäufigkeit - zu einer erhöhten Systemlast führen kann.


Sass ohne Ruby

· · 0 Kommentare

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.

 


Stylesheets aufräumen mit SASS

· · 0 Kommentare

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.


Sass unter Debian

· · 0 Kommentare

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.