Rem font mixin

_rem-font.scss

$legacy-support: ie8 ie9 !default;
// This is the default html and body font-size for the base rem value.
$rem-base: 16px !default;
$line-height-base: 1.8 !default;

// REM calculation courtesy of Zurb Foundation :)

// CONVERT TO REM

@function convert-to-rem($value, $base-value: $rem-base)  {
  $value: strip-unit($value) / strip-unit($base-value) * 1rem;
  @if ($value == 0rem) { $value: 0; } // Turn 0rem into 0
  @return $value;
}

// REM CALC

// New Syntax, allows to optionally calculate on a different base value to counter compounding effect of rem's.
// Call with 1, 2, 3 or 4 parameters, 'px' is not required but supported:
//
//   rem-calc(10 20 30px 40);
//
// Space delimited, if you want to delimit using comma's, wrap it in another pair of brackets
//
//   rem-calc((10, 20, 30, 40px));
//
// Optionally call with a different base (eg: 8px) to calculate rem.
//
//   rem-calc(16px 32px 48px, 8px);
//
// If you require to comma separate your list
//
//   rem-calc((16px, 32px, 48), 8px);

@function rem-calc($values, $base-value: $rem-base) {
  $max: length($values);

  @if $max == 1 { @return convert-to-rem(nth($values, 1), $base-value); }

  $remValues: ();
  @for $i from 1 through $max {
    $remValues: append($remValues, convert-to-rem(nth($values, $i), $base-value));
  }
  @return $remValues;
}

// Simple REM font values
// The idea is you put in pixel values (safe, familiar)
// and you get rem values (strange, mysterious)
@mixin rem-font($pixel-value, $line-height:false) {

  @if unitless($pixel-value) {
    $pixel-value: $pixel-value * 1px;
  }

  @if index($legacy-support, ie8) {
    font-size: $pixel-value;
  }

  font-size: rem-calc($pixel-value);

  @if px == unit($line-height) {
    line-height: $line-height / $pixel-value;
  }
}

// Example implementation

// With units, specific line-height
p {
  @include rem-font(18px, 26px);
}

// Without units, default line-height
blockquote {
  @include rem-font(24);
}