Skip to content

Instantly share code, notes, and snippets.

@JoeNoPhoto
Created October 18, 2015 19:38
Show Gist options
  • Save JoeNoPhoto/6c6b4caf80babf3b2865 to your computer and use it in GitHub Desktop.
Save JoeNoPhoto/6c6b4caf80babf3b2865 to your computer and use it in GitHub Desktop.
REM Units w/ Pixel Fallback
@mixin rem($property, $values...) {
$n: length($values);
$i: 1;
$pxlist: ();
$remlist: ();
@while $i <= $n {
$itemVal: (nth($values, $i));
@if $itemVal != "auto"{
$pxlist: append($pxlist, $itemVal + px);
$remlist: append($remlist, ($itemVal / 10) + rem);
}@else{
$pxlist: append($pxlist, auto);
$remlist: append($remlist, auto);
}
$i: $i + 1;
}
#{$property}: $pxlist;
#{$property}: $remlist;
}
Usage
.main{
@inlcude rem("margin", 10, 0);
@inlcude rem("padding", 10);
@inlcude rem("font-size", 12);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment