REM units with PX fallback from https://snipt.net/torkil/rem-units-with-px-fallback/

rempx.scss

@import 'compass/support';

/*
 * Takes a single value or a list of values and replaces px units with rem
 * Zero values will remain 0
 * Non-px values will not be modified
 *
 * Example (with $base-font-size : 16px)
 *
 * $input  : 0px 16px 2% 8px;
 * $output : 0 1rem 2% 0.5rem;
 */
@function px-to-rem($px) {
    $return : ();

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

    @return $return;
}

/*
 * 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.
 *
 * 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/
 * }
 *
 * Produces:
 * 
 * .navbar {
 *     height: 48px;
 *     height: 3rem; // given a font-size of 16px
 *     line-height: 48px;
 *     line-height: 3 rem;
 *     padding: 16px 8px 2% 0;
 *     padding: 1rem 0.5rem 2% 0;
 *     border-bottom: 12px solid red;
 *     border-bottom: 0.75rem solid red;
 * }
 */
@mixin rem($selectors, $size) {
    @each $selector in $selectors {
      @if $legacy-support-for-ie {
            #{$selector}: $size;
        }
        #{$selector}: px-to-rem($size);
    }
}