Convert px units of font-size and line-height to rems with fallback to px for old browsers. Sass @mixin

_font-rem.scss

/* ==========================
@mixin font-rem
=============================
Convert px units to rems with fallback to older browsers.

Sample:
  h1 { @include font-rem(16px, 24px) };

Compiles to no CSS:
  h1 { 
    font-size: 16px;
    font-size: 1.142857143rem;
    line-height: 24px;
    line-height: 1.714285714rem;
  }
  
Obs:
  - The first argument is for the font-size in px.
  - The second argument is for line-height in px and is optional.
  - Is a good idea to calculate the line-height with 1.5x the font-size.
  - Set the $rem-base-font to the same value of your body or html tag.

========================== */

$rem-base-font: 14px !default;

@mixin font-rem($font-size, $line-height: 0) {
  font-size: $font-size;
  font-size: ($font-size / $rem-base-font) * 1rem;
  @if ($line-height > 0) {
    line-height: $line-height;
    line-height: ($line-height / $rem-base-font) * 1rem;
  }
}