Skip to content

Instantly share code, notes, and snippets.

@stikoo
Last active December 27, 2015 11:49
Show Gist options
  • Save stikoo/7321901 to your computer and use it in GitHub Desktop.
Save stikoo/7321901 to your computer and use it in GitHub Desktop.
A sass mix in to create pixel fallback for rem sizing. Slightly modified version of "http://hugogiraudel.com/2013/03/18/ultimate-rem-mixin/" #sublime #sass
// Use like:
//
// h2 {
// @include rem(font-size, 18px);
// }
//
// or
//
// .box {
// @include rem(margin, 10px 5px 15px 5px);
// }
$base-font-size: 10px !default;
@function parseInt($n) {
@return $n / ($n * 0 + 1);
}
@mixin rem($property, $values) {
$px : ();
$rem: ();
$root: parseInt($base-font-size);
@each $value in $values {
@if $value == 0 or $value == auto {
$px : append($px , $value);
$rem: append($rem, $value);
}
@else if type-of($value) == number {
$unit: unit($value);
$val: parseInt($value);
@if $unit == "px" {
$px : append($px, $value);
$rem: append($rem, ($val / $root + rem));
}
@if $unit == "rem" {
$px : append($px, ($val * $root + px));
$rem: append($rem, $value);
}
}
@else {
$px : append($px, $value);
$rem: append($rem, $value);
}
}
@if $px == $rem {
#{$property}: $px;
} @else {
#{$property}: $px;
#{$property}: $rem;
}
}
@function rem($value) {
$root: parseInt($base-font-size);
$val: parseInt($value);
$return: ();
@if unit($value) == "px" {
$return: append($return, ($val / $root + rem));
} @else {
$return: append($return, ($val * $root + px));
}
@return $return;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment