Skip to content

Instantly share code, notes, and snippets.

@drublic
Created January 29, 2013 18:27
Show Gist options
  • Save drublic/4666398 to your computer and use it in GitHub Desktop.
Save drublic/4666398 to your computer and use it in GitHub Desktop.
An advanced rem fallback in Sass
$main-font-size: 16px;
@mixin x-rem($property, $values) {
// 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 {
$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 * $main-font-size) );
$rem-values: append($rem-values, #{$value}rem);
}
}
// Return the property and its list of converted values
#{$property}: #{$px-values};
#{$property}: #{$rem-values};
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment