SCSS Mixin for rem font sizing with px fallback for older browsers

scss-mixin-for-rem-font-sizing.md

CSS

  
    html {
      font-size: 16px; /* Sets up the Base font size */
    }
  

SCSS

  
    @mixin font-size($sizeValue: 1) {
      font-size: ($sizeValue * 16) + px;
      font-size: $sizeValue + rem;
    }
  

Usage

SCSS

  
    p {
      @include font-size(2);
    }
  

(Thanks CSS tricks)

Can I use rem

px to rem conversion if :root font-size is 16px