SCSS Mixin for using rem with px fallback.

_px-to-rem.scss

/**
 * _px-to-rem.scss
 *
 * Author: Marian Friedmann
 *
 * Usage:
 * .element {
 *   @include px-to-rem(padding, 0 24px)
 * }
 *
 * Output:
 * .element {
 *   padding: 0 24px;
 *   padding: 0 1.5rem;
 * }
 */

@function toRem($px) {
  $rem: $px / $baseFontSize;
  @return #{$rem}rem;
}

@mixin px-to-rem($prop, $values) {

  $output: ();

  @each $value in $values {
    @if $value != 0 {
      $value: toRem($value);
    }
    $output: append($output, $value);
  }

  #{$prop}: $values; // Fallback
  #{$prop}: $output;
}