Calculate REM size with Sass
// Take a px and convert to rem
@function calculateRem($values) {
@if $supports-rem {
$max: length($values);
@if $max == 1 { @return convert-to-rem(nth($values, 1)); }
$remValues: ();
@for $i from 1 through $max {
$remValues: append($remValues, convert-to-rem(nth($values, $i)));
}
@return $remValues;
}
@else {
@return $values; //just use value we were provided
}
}
@function convert-to-rem($size) {
$remSize: $size / $rem-base;
@return $remSize * 1rem;
}
@mixin font-size($size) {
font-size: calculateRem($size);
}
@mixin rem-size($attribute, $sizes) {
#{$attribute}: calculateRem($sizes);
}