SASS Mixin for REM and PX
/**
* Parse an Integer in scss
* @param {String} $n
* @return {Integer}
*/
@function parse-int($n) {
@return $n / ($n * 0 + 1);
}
/**
* Mixin for calculating Rems with Px fallback. Thanks to hugogiraudel
* @param {String} $property the property ex: font-size
* @param {Object} $values the values (can be single or multiple) ex: 1rem 1rem 0
*/
@mixin rem($property, $values) {
$px : ();
$rem: ();
@each $value in $values {
@if $value == 0 or type-of($value) != "number" {
$px : append($px , $value);
$rem: append($rem, $value);
}
@else {
$unit: unit($value);
$val: parse-int($value);
@if $unit == "px" {
$px : append($px, $value);
$rem: append($rem, ($val / 10 + rem));
}
@if $unit == "rem" {
$px : append($px, ($val * 10 + px));
$rem: append($rem, $value);
}
}
}
@if $px == $rem {
#{$property}: $px;
} @else {
#{$property}: $px;
#{$property}: $rem;
}
}