Output font-size in rem with px fallback

font-size

/**
 * Output font-size (and line-height) in rem with px fallback
 *
 * After declaring a font-size of 100% on the html tag, you should use the
   @font_size for all other font-size declarations.
 *
 * @code
 * html {
 *   font: 100%/1.4 "Times New Roman", Times, Serif normal;
 * }
 * p {
 *  @include font_size(.875rem, 1.5);
 * }
 * @endcode
 *
 * @param $size
 *   rem and px: will be converted to rem with px fallback
 *   % and em will pass through without conversion
 * @param $line_height
 *   Optional, behaves same as $size
 *   
 * @author Aaron Klump, In the Loft Studios, LLC
 * @see http://www.intheloftstudios.com
 * @see http://gist.github.com/2925506
 */
@mixin font-size($size, $line_height: false){
  $rem_ratio: 16px / 1rem;

  $unit: unit($size);
  @if $unit == 'rem' {
    font-size: $size * $rem_ratio;
    font-size: $size;
  }
  @else if $unit == 'px' {
    font-size: $size;
    font-size: $size / $rem_ratio;
  }
  @else {
    font-size: $size;
  }

  @if $line_height {
    $unit: unit($line_height);
    @if $unit == 'rem' {
      line-height: $line_height * $rem_ratio;
      line-height: $line_height;
    }
    @else if $unit == 'px' {
      line-height: $line_height;
      line-height: $line_height / $rem_ratio;
    }
    @else {
      line-height: $line_height;
    }
  }
}

/**
 * Convert rem to pixels
 *
 * @param mixed $rem
 *
 * @return mixed
 */
@function rem_px($rem) {
  $rem_ratio: 16px / 1rem;
  @return $rem * $rem_ratio;
}