Rems fallbacks and support

rems-fallbacks-and-support.css

/* the font-size mixin */
/* example of usage */
.prose p {
  font-size: 14px;
  font-size: 0.875rem;
}

rems-fallbacks-and-support.scss

// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// ----
// http://alwaystwisted.com/post.php?s=2014-01-01-rems-fallbacks-and-support
$doc-font-size: 16;

/* the font-size mixin */

@mixin font-size-1($size) {
  font-size: 0px + $size;
  font-size: 0rem + $size / $doc-font-size;
}

/* example of usage */
p {
  @include font-size-1(14);  
}
/* 
 * http://zerosixthree.se/8-sass-mixins-you-must-have-in-your-toolbox/
 * or with an extra function to make it a bit cleaner by seperating it out:
*/
@function calculateRem($size) {
  $remSize: $size / 16px;
  @return $remSize * 1rem;
}

@mixin font-size-2($size) {
  font-size: $size;
  font-size: calculateRem($size);
}

/* example of usage */
p {
  @include font-size-2(14px);
}