/** * PX2rem * * @author @kaelig - https://gist.github.com/kaelig/7451284 * */ // Transform a value into rem // Assuming baseline is set to 10px on :root/html @function rem($value, $baseline: 16px { @if $value == 0 { @return 0; } // 0rem -> 0 @if type-of($value) == list { $result: (); @each $e in $value { $result: append($result, rem($e)); } @return $result; } @else { @return if(type-of($value) == number and unit($value) == px, $value / $baseline * 1rem, $value); } } // Output rem units with px fallback // Expects $properties to be a Sass map @mixin rem($properties) { @each $property, $value in $properties { @if (type-of($value) == number and $value != 0) { // Turn any value into pixels $value: if(unitless($value), $value * 1px, $value); } #{$property}: $value; #{$property}: rem($value); } }