px to rem and rem to px SASS function
$rem-baseline: 16px !default
$rem-fallback: false !default
$rem-px-only: false !default
@function rem-separator($list, $separator: false)
@if $separator == "comma" or $separator == "space"
@return append($list, null, $separator)
@if function-exists("list-separator") == true
@return list-separator($list)
// list-separator polyfill by Hugo Giraudel (https://sass-compatibility.github.io/#list_separator_function)
$test-list: ()
@each $item in $list
$test-list: append($test-list, $item, space)
@return if($test-list == $list, space, comma)
=rem-baseline($zoom: 100%)
font-size: $zoom / 16px * $rem-baseline
@function rem-convert($to, $values...)
$result: ()
$separator: rem-separator($values)
@each $value in $values
@if type-of($value) == "number" and unit($value) == "rem" and $to == "px"
$result: append($result, $value / 1rem * $rem-baseline, $separator)
@else if type-of($value) == "number" and unit($value) == "px" and $to == "rem"
$result: append($result, $value / $rem-baseline * 1rem, $separator)
@else if type-of($value) == "list"
$value-separator: rem-separator($value)
$value: rem-convert($to, $value...)
$value: rem-separator($value, $value-separator)
$result: append($result, $value, $separator)
@else
$result: append($result, $value, $separator)
@return if(length($result) == 1, nth($result, 1), $result)
@function rem($values...)
@if $rem-px-only
@return rem-convert(px, $values...)
@else
@return rem-convert(rem, $values...)
=rem($properties, $values...)
@if type-of($properties) == "map"
@each $property in map-keys($properties)
+rem($property, map-get($properties, $property))
@else
@each $property in $properties
@if $rem-fallback or $rem-px-only
#{$property}: rem-convert(px, $values...)
@if not $rem-px-only
#{$property}: rem-convert(rem, $values...)