Tool: Sass Globbing Plugin

Mit Hilfe des Sass Globbing Plugins können viele scss-Dateien auf einmal importiert werden. Sehr hilfreich beim Import einzelner Mixin-Dateien, oder wenn es viele separate Stylesheets für einzelne Module gibt.

Installation

$ gem install sass-globbing

Einbindung in config.rb

require 'sass-globbing'

Benutzung

Um beispielsweise viele einzelne Modul-Stylesheets einzubinden:

@import "_mod*";

Sass-/ Compass-Encoding auf UTF-8 umstellen

Beim erstmaligen compass compile eines neuen Projekt wurde mir heute die folgende Fehlermeldung ausgegeben:

Invalid US-ASCII character "\xC3"

Sass und Compass bekommen ihre Encoding-Optionen von Ruby, dass sie wiederum vom Environment (sprich: Dem Server, auf dem es läuft) übernimmt.

Um dieses Problem zu beheben, können zum einen die Locales (Spracheinstellungen) des Systems angepasst werden oder aber „nur“ das Encoding von Sass/ Compass auf UTF-8 umgestellt werden.

Locales umstellen

Achtung: Ich habe, was Server-Geschchichten angeht, maximal Achtelwissen und frage lieber sachkundige Mitmenschen. Daher verweise ich gern auf den Wiki-Artikel Locales unter Ubuntu konfigurieren.
In meinem konkreten Fall bekam ich (wie immer) schnell und kompetent Support von meinem Hoster Uberspace, der mit freundlicherweise die benötige Zeile Code gleich per Mail schickte:

export LC_CTYPE="en_US.UTF-8"

Hat bei mir funktioniert:

[user@server ~]$ locale
LANG=
LC_CTYPE=en_US.UTF-8

Encoding von Sass/ Compass ändern

Um das Encoding von Sass/ Compass zu ändern, muss in der config.rb-Datei folgende Zeile Code eingefügt werden:

Encoding.default_external = 'utf-8'

Quellen

Encoding error on compass font-face mixin

Sass-Mixin: rem mit px-Fallback

Ich nutze im Css so gut wie ausschließlich rem (siehe dazu auch CSS-Tipp: rem als Einheit für Schriftgröße nutzen) als Einheit und trug das benötigte Pixel-Fallback bisher händisch ein. Mit der Zeit nervt das ziemlich, daher war ich sehr erfreut als ich vor kurzem das rem-Mixin für Sass von Hans Christian Reinl fand. Dieses Mixin berechnet aus einem angegebenen rem-Wert das Pixel-Fallback und fügt es ins Stylesheet ein. Das ist prinzipiell eine tolle Sache, half mir aber noch nicht vollständig weiter, da ich sehr oft Pixel als Einheit genannt bekomme. Daher habe ich das Mixin so modifiziert, dass es Pixelwerte annimmt und in rem umrechnet:

@mixin px-rem($property, $values, $main-font-size: 16) {
	// Empty list for all values in px
	$px-values: ();
	$rem-values: ();

	// Iterate over entries
	@each $value in $values {

		// If the value is zero, return 0
		@if $value == 0 or type_of($value) != number {
			$px-values: append($px-values, $value);
			$rem-values: append($rem-values, $value);

		// If the value is not zero, convert it from px to rem
		} @else {
			$px-values: append($px-values,#{$value}px);
			$rem-values: append($rem-values,($value/$main-font-size)+rem);
		}
	}

	// Return the property and its list of converted values
	#{$property}: #{$px-values};
	#{$property}: #{$rem-values};
}

Aufgerufen wird das Mixin wie folgt:

.selector {
    @include px-rem(font-size, 20);
}

Das Ergebnis sieht so aus:

.selector {
    font-size: 20px;
    font-size: 1.25rem;
}