to-rem.scss

/*
 * a small mixin for easy use of rem. Only for modern browsers. (No px as fallback)
 * for px fallback refer: https://gist.github.com/gbhasha/938a17d5f83a78f56da7
 * usage: @include to-rem(font-size, 14px)
 * usage: @include to-rem(marign, 0 12px 2 1.2)
 * usage: @include to-rem(padding, 1.5 24px)
 *
 */
@mixin to-rem($property, $values) {
  // Create a list as output buffer.
  $base-font-size: 16px; // should be consistent with your html/body font-size
  $rem-values: ();

  // Loop through the $values list
  @each $value in $values {
    // For each property value, if it's in rem or px, derive rem value
    // for it and add those to the end of the appropriate buffer.
    @if $value == 0 or $value == 0px {
      // 0 -- use it without a unit
      $rem-values: join($rem-values, 0);
    } @else if type-of($value) == string {
      // string value such as auto or inherit given - do nothing
      $rem-values: join($rem-values, $value);
    } @else if type-of($value) == number and not unitless($value) and (unit($value) == px) {
      // px value given - calculate rem value from base-font-size
      $new-rem-value: $value / $base-font-size;
      $rem-values: join($rem-values, #{$new-rem-value}rem);
    } @else {
      // unitless value - use those directly as rem
      $rem-values: join($rem-values, #{$value}rem);
    }
  }

  // output the converted rules
  #{$property}: $rem-values;
}