Experimental Font Relativity in Different Unit Conversion ( px, em, per, pt, rem)

scss, sass

$unitless: 16; // resize to your desire need
$font-size-unit: $unitless + 0px;
@function rem($valuePixels, $context: $font-size-unit, $em: false, $per: false, $pt: false) {

  @if (unitless($valuePixels)) {
    $valuePixels: $valuePixels * 1px;
  }

  @if (unitless($context)) {
    $context: $context * 1px;
  }

  @if $per == true {
    $valuePixels: ( $valuePixels * 6.25 * 0.16);
    // % and em will behave and compute the same.
  }

  @if $em == true {
    // $valuePixels: $valuePixels * 1;
    $valuePixels: ( $valuePixels / 0.063 );
    // % and em will behave and compute the same.
  }

  @if $pt == true {
    $valuePixels: ( $valuePixels * 0.75 * 1.333333 );
    // get the value of 1px in 1pt = 0.75 then multiply it by 1.333333 which the default value of pt to px
    // https://websemantics.uk/tools/convert-pixel-point-em-rem-percent/
    // http://www.endmemo.com/sconvert/pixelpoint.php
  }

  @return  #{$valuePixels / $context}rem;
}


body {
  font-size: $font-size-unit;
}

div {
  font-size: rem(45px);
    
    + div {
        font-size: rem(45);
      
        + div {
          font-size: rem(2.85, $em: true);
          
          + div {
              font-size: rem(45, $pt: true);
            
              + div {
                font-size: rem(45, $per: true);
              }
            }
        }
    }
}