Rem Fallback

rem.scss

@function strip-unit($num) {
  @return $num / ($num * 0 + 1);
}

@mixin rem-fallback($property, $values...) {
  $max: length($values);
  $pxValues: '';
  $remValues: '';

  @for $i from 1 through $max {
    $value: strip-unit(nth($values, $i));
    $pxValues: #{$pxValues + $value*16}px;

    @if $i < $max {
      $pxValues: #{$pxValues + " "};
    }
  } 

  @for $i from 1 through $max {
    $value: strip-unit(nth($values, $i));
    $remValues: #{$remValues + $value}rem;

    @if $i < $max {
      $remValues: #{$remValues + " "};
    }
  } 
  
  #{$property}: $pxValues; 
  #{$property}: $remValues; 
}

// So that this can be used as
//.selector {
//  @include rem-fallback(margin, 10, 20, 30, 40);
//}

// to get
//.selector {
//  margin: 160px 320px 480px 640px;
//  margin: 10rem 20rem 30rem 40rem; 
//}

@mixin toRem($value) {
  font-size: $value;
  font-size: $value / 16;
}