Generated by SassMeister.com.

input.scss

// Given a value with a unit
// return the value without the unit
@function strip-unit($item) {
  @if type-of($item) == 'number' and not unitless($item) {
    @return $item / ( $item * 0 + 1 );
  }

  @return $item;
}

// Applies $unit to $val
// Inverse of strip-unit
@function apply-unit($unit, $val) {
  @return unquote('#{$val}#{$unit}');
}

// Partially applied apply-unit for px unit
@function px($val) {
  @return apply-unit('px', $val);
}

// Partially applied apply-unit for rem unit
@function rem($val) {
  @return apply-unit('rem', $val);
}

// Converts pixels to ems
@function px-to-em($root, $size) {
  @return em( strip-unit( $size / $root ) );
}

// Converts pixels to rems
@function px-to-rem($root, $size) {
  @return rem( strip-unit( $size / $root ) );
}

// mixin to output px-to-rem function
// inside a font-size attribute
@mixin rems($root, $size) {
  // fallback to pixels
  // turned off due to widespread
  // browser support for rems
  // font-size: px( strip-unit( $size ) );
  font-size: px-to-rem( $root, $size );
}

$font-size-base: 16 !default;

// Partially applied rems mixin with $font-size-base
@mixin site-rems($size) {
  @include rems($font-size-base, $size);
}

// output options
.h1 {
    @include rems($font-size-base, 42);
}
.h2 {
    @include site-rems(42);
}
.h3 {
    font-size: px-to-rem($font-size-base, 42);
}

output.css

.h1 {
  font-size: 2.625rem;
}

.h2 {
  font-size: 2.625rem;
}

.h3 {
  font-size: 2.625rem;
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.26.11",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}