A sass mix in to create pixel fallback for rem sizing. Slightly modified version of "http://hugogiraudel.com/2013/03/18/ultimate-rem-mixin/" #sublime #sass

mixin-rem.scss

// Use like:
//
// h2 {
//   @include rem(font-size, 18px);
// }
//
// or
//
// .box {
//   @include rem(margin, 10px 5px 15px 5px);
// }


$base-font-size: 10px !default;

@function parseInt($n) {
  @return $n / ($n * 0 + 1);
}

@mixin rem($property, $values) {
  $px : ();
  $rem: ();

  $root: parseInt($base-font-size);

  @each $value in $values {
    @if $value == 0 or $value == auto {
      $px : append($px , $value);
      $rem: append($rem, $value);
    }

    @else if type-of($value) == number {
      $unit: unit($value);
      $val: parseInt($value);

      @if $unit == "px" {
        $px : append($px,  $value);
        $rem: append($rem, ($val / $root + rem));
      }

      @if $unit == "rem" {
        $px : append($px,  ($val * $root + px));
        $rem: append($rem, $value);
      }
    }

    @else {
      $px : append($px,  $value);
      $rem: append($rem, $value);
    }
  }

  @if $px == $rem {
    #{$property}: $px;
  } @else {
    #{$property}: $px;
    #{$property}: $rem;
  }
}

@function rem($value) {
  $root: parseInt($base-font-size);
  $val: parseInt($value);
  $return: ();

  @if unit($value) == "px" {
    $return: append($return, ($val / $root + rem));
  } @else {
    $return: append($return, ($val * $root + px));
  }

  @return $return;
}