Generated by SassMeister.com.

input.scss

@use 'sass:list';
@use 'sass:string';
@use 'sass:map';
@use 'sass:meta';
@use 'sass:math';

$base-font-size: 16px; /* ~1rem */
$base-line-height: 1.12;

@function strip-unit($number) {
  @if meta.type-of($number) == "number" and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }

  @return $number;
}

@function grid-unit($multiplier: 1) {
  @return #{strip-unit($base-font-size) * $multiplier * $base-line-height * 0.0625}rem;
}

@function px-to-rem($value, $base) {
  $new-value: 0;
  $new-base: 0;
  @if meta.type-of($value) != "number" or meta.type-of($base) != "number" {
    @error "#{$value} and #{$base} might be both number with `px`, " +
      "or unitless number. #{meta.type-of($value)} and #{meta.type-of($base)} found";
  } @else {
    $valid-number: true;
    @if not math.is-unitless($value) {
      @if math.unit($value) != "px" {
        $valid-number: false;
      } @else {
        $new-value: strip-unit($value);
      }
    } @else {
      $new-value: $value;
    }
    @if not math.is-unitless($base) {
      @if math.unit($base) != "px" {
        $valid-number: false;
      } @else {
        $new-base: strip-unit($base);
      }
    } @else {
      $new-base: $base;
    }
    @if not $valid-number {
      @error "#{$value} and #{$base} might be both number with `px`, or unitless number. " +
        "#{meta.type-of($value)}[#{math.unit($value)}] and " +
        "#{meta.type-of($base)}[#{math.unit($base)}] found";
    }
  }

  @return $new-value / $new-base * 1rem;
}

@function px-to-em($value, $base) {
  $new-value: 0;
  $new-base: 0;
  @if meta.type-of($value) != "number" or meta.type-of($base) != "number" {
    @error "#{$value} and #{$base} might be both number with `px`, " +
      "or unitless number. #{meta.type-of($value)} and #{meta.type-of($base)} found";
  } @else {
    $valid-number: true;
    @if not math.is-unitless($value) {
      @if math.unit($value) != "px" {
        $valid-number: false;
      } @else {
        $new-value: strip-unit($value);
      }
    } @else {
      $new-value: $value;
    }
    @if not math.is-unitless($base) {
      @if math.unit($base) != "px" {
        $valid-number: false;
      } @else {
        $new-base: strip-unit($base);
      }
    } @else {
      $new-base: $base;
    }
    @if not $valid-number {
      @error "#{$value} and #{$base} might be both number with `px`, or unitless number. " +
        "#{meta.type-of($value)}[#{math.unit($value)}] and " +
        "#{meta.type-of($base)}[#{math.unit($base)}] found";
    }
  }

  @return $new-value / $new-base * 1em;
}

@function str-to-unit($value) {
  $units: ('px': 1px, 'cm': 1cm, 'mm': 1mm, '%': 1%, 'ch': 1ch, 'pc': 1pc, 'in': 1in, 'em': 1em, 'rem': 1rem, 'pt': 1pt, 'ex': 1ex, 'vw': 1vw, 'vh': 1vh, 'vmin': 1vmin, 'vmax': 1vmax);
  $parsed-unit: false;

  @each $unit in $units {
    @if (string.index($value, list.nth($unit, 1))) {
      $parsed-unit: list.nth($unit, 2);
    }
  }

  @if not $parsed-unit {
    @error "Invalid unit `#{$value}`.";
  }

  $result: 0;
  $digits: 0;
  $minus: string.slice($value, 1, 1) == '-';
  $numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9);

  @for $i from if($minus, 2, 1) through string.length($value) {
    $character: string.slice($value, $i, $i);

    @if (list.index(map.keys($numbers), $character) or $character == '.') {
      @if $character == '.' {
        $digits: 1; 
      } @else if $digits == 0 {
        $result: $result * 10 + map.get($numbers, $character);  
      } @else {
        $digits: $digits * 10;
        $result: $result + map.get($numbers, $character) / $digits;
      }
    }
  }
  
  $parsed-number: if($minus, -$result, $result);
  
  @return $parsed-number * $parsed-unit;
}

@function unit-perct-mult($unit, $percentage) {
    $stripped: strip-unit($unit);
    $computed: $percentage / 100 * $stripped;
    $computed: $computed + $stripped;
    
    @return #{$computed} + #{math.unit($unit)}
}

.testik {
    test: unit-perct-mult(1.5rem, 20);
}

$breakpoints: (
  sm: 672px,
  md: 990px,
  lg: 1296px
);

$percentage-difference-multiplier: 30;
$font-size-adjuster: (
  200: -0.4,
  300: -0.1,
  400: 0,
  500: +0.1,
  600: +0.4,
  700: +0.7,
  800: +1.1
);

$font-size: px-to-rem($base-font-size, $base-font-size);
$font-sizes: (
  base: (
    200: $font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 200))),
    300: $font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 300))),
    400: $font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 400))),
    500: $font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 500))),
    600: $font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 600))),
    700: $font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 700))),
    800: $font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 800))),
  ),
  sm: (
    200: unit-perct-mult($font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 200))), $percentage-difference-multiplier),
    300: unit-perct-mult($font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 300))), $percentage-difference-multiplier),
    400: unit-perct-mult($font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 400))), $percentage-difference-multiplier),
    500: $font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 600))),
    600: unit-perct-mult($font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 600))), $percentage-difference-multiplier),
    700: unit-perct-mult($font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 700))), $percentage-difference-multiplier),
    800: unit-perct-mult($font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 800))), $percentage-difference-multiplier),
  ),
  md: (
    200: unit-perct-mult($font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 200))), $percentage-difference-multiplier * 2),
    300: unit-perct-mult($font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 300))), $percentage-difference-multiplier * 2),
    400: unit-perct-mult($font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 400))), $percentage-difference-multiplier * 2),
    500: $font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 500))),
    600: unit-perct-mult($font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 600))), $percentage-difference-multiplier * 2),
    700: unit-perct-mult($font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 700))), $percentage-difference-multiplier * 2),
    800: unit-perct-mult($font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 800))), $percentage-difference-multiplier * 2),
  ),
  lg: (
    200: unit-perct-mult($font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 200))), $percentage-difference-multiplier * 3),
    300: unit-perct-mult($font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 200))), $percentage-difference-multiplier * 3),
    400: unit-perct-mult($font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 200))), $percentage-difference-multiplier * 3),
    500: $font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 500))),
    600: unit-perct-mult($font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 200))), $percentage-difference-multiplier * 3),
    700: unit-perct-mult($font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 200))), $percentage-difference-multiplier * 3),
    800: unit-perct-mult($font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 200))), $percentage-difference-multiplier * 3),
  ),
);

$font-path: "../fonts";
$fonts: (
  poppins: (
    name: "Poppins",
    types: (
      400: (
        src: "#{$font-path}/Poppins-400.ttf",
        format: "truetype",
        weight: 400,
        style: normal
      ),
      500: (
        src: "#{$font-path}/Poppins-500.ttf",
        format: "truetype",
        weight: 500,
        style: normal
      ),
      600: (
        src: "#{$font-path}/Poppins-600.ttf",
        format: "truetype",
        weight: 600,
        style: normal
      )
    )
  ),
);

.testik {
    test: math.round(0.79635 * 1000) / 1000;
}

@mixin mq($key) {
  $size: map.get($breakpoints, $key);
  @if not $size {
    @error "#{$key} is not valid property. Expected: [#{map.keys($breakpoints)}]";
  }
  @media only screen and (min-width: px-to-em($size, $base-font-size)) {
      @content;
  }
}

@mixin font($key) {
    $fallback-fonts: "system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji";
    font-family: map.get(map.get($fonts, $key), "name"), #{$fallback-fonts};
}

:root {
    @each $breakpoint, $size in $font-sizes {
        
        @if not list.index(map.keys($breakpoints), $breakpoint) {
            @each $size, $value in $size {
                --fs-#{$size}: #{$value};
            }
        } @else {
            @include mq($breakpoint) {
                @each $size, $value in $size {
                    --fs-#{$size}: #{$value};
                }
            }
        }
    }
}

/// Font-size applier
@mixin font-size($key) {
  font-size: var(--fs-#{$key});
  $font-size: strip-unit(map.get(map.get($font-sizes, "base"), $key));
  line-height: grid-unit($font-size);
  @each $breakpoint, $value in $breakpoints {
    $font-size: strip-unit(map.get(map.get($font-sizes, $breakpoint), $key));
    @include mq($breakpoint) {
        line-height: grid-unit($font-size);
    }
  }
}

.test {
    &__one {
        @include font(poppins);
        @include font-size(500);
        font-weight: 400;    
    }
}

output.css

/* ~1rem */
.testik {
  test: 1.8rem;
}

.testik {
  test: 0.796;
}

:root {
  --fs-200: 0.552rem;
  --fs-300: 0.888rem;
  --fs-400: 1rem;
  --fs-500: 1.112rem;
  --fs-600: 1.448rem;
  --fs-700: 1.784rem;
  --fs-800: 2.232rem;
}
@media only screen and (min-width: 42em) {
  :root {
    --fs-200: 0.7176rem;
    --fs-300: 1.1544rem;
    --fs-400: 1.3rem;
    --fs-500: 1.448rem;
    --fs-600: 1.8824rem;
    --fs-700: 2.3192rem;
    --fs-800: 2.9016rem;
  }
}
@media only screen and (min-width: 61.875em) {
  :root {
    --fs-200: 0.8832rem;
    --fs-300: 1.4208rem;
    --fs-400: 1.6rem;
    --fs-500: 1.112rem;
    --fs-600: 2.3168rem;
    --fs-700: 2.8544rem;
    --fs-800: 3.5712rem;
  }
}
@media only screen and (min-width: 81em) {
  :root {
    --fs-200: 1.0488rem;
    --fs-300: 1.0488rem;
    --fs-400: 1.0488rem;
    --fs-500: 1.112rem;
    --fs-600: 1.0488rem;
    --fs-700: 1.0488rem;
    --fs-800: 1.0488rem;
  }
}

.test__one {
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
  font-size: var(--fs-500);
  line-height: 1.24544rem;
  font-weight: 400;
}
@media only screen and (min-width: 42em) {
  .test__one {
    line-height: 1.62176rem;
  }
}
@media only screen and (min-width: 61.875em) {
  .test__one {
    line-height: 1.24544rem;
  }
}
@media only screen and (min-width: 81em) {
  .test__one {
    line-height: 1.24544rem;
  }
}

settings.json

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