Generated by SassMeister.com.

input.scss

$html-font-size: 16px;
$enable-rem: true;

@function stripUnit($value) {
    @return $value / ($value * 0 + 1);
}

@function rem($value) {
    @if $enable-rem {
        @return #{$value/stripUnit($html-font-size)}rem;
    }
    @return $value + px;
}

.component {
    font-size: rem(14);
}

.component {
    padding: rem(16) rem(12) rem(8) rem(4);
}

output.css

.component {
  font-size: 0.875rem;
}

.component {
  padding: 1rem 0.75rem 0.5rem 0.25rem;
}

settings.json

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