Generated by SassMeister.com.

input.scss

@use "sass:math";

$type-size-root: 14px;
$type-ratio: 7px / 6px;
$type-names: (
    50: -2,
    75: -1,
    100: 0,
    200: 1,
    300: 2,
    400: 3,
    500: 4,
    600: 5,
    700: 6,
    800: 7,
    900: 8,
    1000: 9,
);

@function roundto($num, $div) {
    @return math.floor($num / $div) * $div;
}

@function typesize($num) {
    $raw: $type-size-root * math.pow($type-ratio, $num);
    
    @if $raw < 16 {
        @return math.round($raw);
    } @else if $raw < 28 {
        @return roundto($raw, 2);
    } @else {
        @return roundto($raw, 4);   
    }
}

:root {
    @each $name, $scale in $type-names {
        --font-size-#{$name}: #{typesize($scale)};
    }
}

output.css

:root {
  --font-size-50: 10px;
  --font-size-75: 12px;
  --font-size-100: 14px;
  --font-size-200: 16px;
  --font-size-300: 18px;
  --font-size-400: 22px;
  --font-size-500: 24px;
  --font-size-600: 28px;
  --font-size-700: 32px;
  --font-size-800: 40px;
  --font-size-900: 48px;
  --font-size-1000: 56px;
}

settings.json

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