px-rem mixin to generate rules in both units

px-rem.scss

$rem-size: 16px !default;

@function to-px($val) {
  @if type-of($val) == number and unit($val) == rem {
    @return $val * $rem-size / 1rem;
  }
  @return $val;
}

@function to-rem($val) {
  @if type-of($val) == number and unit($val) == px {
    @return $val / $rem-size * 1rem;
  }
  @return $val;
}

@mixin px-rem($prop, $values...) {
  $px-list: ();
  $rem-list: ();

  @each $value in $values {
    $px-list: append($px-list, to-px($value));
    $rem-list: append($rem-list, to-rem($value));
  }

  @if ($px-list != $rem-list) {
    #{$prop}: $px-list;
  }
  #{$prop}: $rem-list;
}