pixelsToRems.scss

@function apply-unit($unit, $val) {
  @return unquote('#{$val}#{$unit}');
}

@function strip-unit($number) {
  @if type-of($number) == 'number' and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }
  @return $number;
}

// shortcut function to apply px unit
@function px($val) {
  @return apply-unit('px', $val);
}

// shortcut function to apply rem unit
@function rem($val) {
  @return apply-unit('rem', $val);
}

// convert pixels to rems
@function px-to-rem($root, $size) {
  @return rem( strip-unit( $size / $root ) );
}

// mixin to output px-to-rem function
// inside a font-size attribute
@mixin rems($root, $size) {
  // fallback to pixels
  // turned off due to widespread
  // browser support for rems
  // font-size: px( strip-unit( $size ) );
  font-size: px-to-rem( $root, $size );
}

$base-font-size: 16px;

// partially applied rems mixin with $base-font-size
@mixin grCom-rems($size) {
  @include rems($base-font-size, $size);
}

.test {
  @include grCom-rems(11);
}