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;
}

Beitrag veröffentlicht

in

von

Schlagwörter:

Kommentare

Kommentar verfassen