Rem units with px fallback

mixin--rem.scss

/**
 * Output a selector with px fallback and rem values, so that modern browsers will use the rem values.
 * Both multiple selectors and multiple sizes in multiple units can be provided.
 * Zero values remain 0, non-px values will not be modified.
 *
 * Usage example:
 * 
    .navbar {
        @include rem(height line-height, 48px); // multiple selectors
        @include rem(padding, 16px 8px 2% 0px); // multiple units, only px will be converted
        @include rem(border-bottom, rhythm(.5) solid red); // Rhythm: http://compass-style.org/reference/compass/typography/vertical_rhythm/
    }
 *
 * @link: https://snipt.net/torkil/rem-units-with-px-fallback/
 */

@function px-to-rem($px) {
    $return : ();

    @each $var in $px {

        @if type-of($var) == 'number' {
            @if abs($var) > 0 {
                @if unit($var) == 'px' {
                    $return : append($return, #{$var/$base-font-size}rem, space);
                } @else {
                    $return : append($return, $var, space);
                }
            } @else {
                $return : append($return, 0, space);
            }
        } @else {
            $return : append($return, $var, space);
        }

    }

    @return $return;
}

$legacy-support-for-ie: true;

@mixin rem($selectors, $size) {
    @each $selector in $selectors {
      @if $legacy-support-for-ie {
            #{$selector}: $size;
        }
        #{$selector}: px-to-rem($size);
    }
}