Generated by SassMeister.com.

input.scss

$type-scale-ratio: 1.125;
$type-scales: (
	'sm': (
		1: 10px,
		2: 12px,
		3: 14px
	),
	'md': (
		1: 16px,
		2: 18px,
		3: 20px
	),
	'lg': (
		1: 22px,
		2: 24px,
		3: 32px
	),
	'xl': (
		1: 42px,
		2: 64px
		// 3: 72px
	)
);

:root {
  @each $scalecategory, $scalelevels in $type-scales {
    @each $scalelevel, $scalevalue in $scalelevels {
      --type-scale-#{$scalecategory}-#{$scalelevel}: #{$scalevalue};
    }
  }
  
  @media screen and (max-width: 480px){
      @each $scalecategory, $scalelevels in $type-scales {
      @each $scalelevel, $scalevalue in $scalelevels {
        @if $scalecategory == 'sm' {
          --type-scale-#{$scalecategory}-#{$scalelevel}: #{$scalevalue + 2px};
        } @else if $scalecategory == 'md' and $scalelevel == 1 {
          --type-scale-#{$scalecategory}-#{$scalelevel}: #{$scalevalue};
        } @else {
        --type-scale-#{$scalecategory}-#{$scalelevel}: #{round($scalevalue / $type-scale-ratio * 100) / 100};
        }
      }
    }
  }
}

output.css

:root {
  --type-scale-sm-1: 10px;
  --type-scale-sm-2: 12px;
  --type-scale-sm-3: 14px;
  --type-scale-md-1: 16px;
  --type-scale-md-2: 18px;
  --type-scale-md-3: 20px;
  --type-scale-lg-1: 22px;
  --type-scale-lg-2: 24px;
  --type-scale-lg-3: 32px;
  --type-scale-xl-1: 42px;
  --type-scale-xl-2: 64px;
}
@media screen and (max-width: 480px) {
  :root {
    --type-scale-sm-1: 12px;
    --type-scale-sm-2: 14px;
    --type-scale-sm-3: 16px;
    --type-scale-md-1: 16px;
    --type-scale-md-2: 16px;
    --type-scale-md-3: 17.78px;
    --type-scale-lg-1: 19.56px;
    --type-scale-lg-2: 21.33px;
    --type-scale-lg-3: 28.44px;
    --type-scale-xl-1: 37.33px;
    --type-scale-xl-2: 56.89px;
  }
}

settings.json

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