Generated by SassMeister.com.

input.scss

//
// Defining global values
// Font sizes are divided in 4 scales:
// - Small: 10px, 12px, 14px
// - Medium: 16px, 18px, 20px
// - Large: 22px, 24px, 32px
// - Extra large: 48px, 60px, 72px
// Sass values are transformed into
// CSS variables through a sass function
//
$prefix: 'ids';
$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: 48px,
		2: 60px,
		3: 72px
	)
);

//
// Main sizes are defined here.
// Each value passed from the SASS
// gets converted into a CSS variable
//
:root {
    --#{$prefix}-type-scale-ratio: #{$type-scale-ratio};
    @each $scalecategory, $scalelevels in $type-scales {
        @each $scalelevel, $scalevalue in $scalelevels {
            --#{$prefix}-type-scale-#{$scalecategory}-#{$scalelevel}: #{$scalevalue};
        }
    }
}

//
// Mobile sizes are defined here.
// This approach is desktop-first intentionally
// Every size is divided by the major second scale ($type-scale-ratio)
// Sizes in the "small" group are increased by 2px
//
@media screen and (max-width: 480px){
    :root {
        @each $scalecategory, $scalelevels in $type-scales {
            @each $scalelevel, $scalevalue in $scalelevels {
                @if $scalecategory == 'sm' {
                    --#{$prefix}-type-scale-#{$scalecategory}-#{$scalelevel}: calc(#{$scalevalue}+2px);
                }@else {
                --#{$prefix}-type-scale-#{$scalecategory}-#{$scalelevel}: calc(#{$scalevalue}/#{$type-scale-ratio});
                }
            }
        }
    }
}

output.css

:root {
  --ids-type-scale-ratio: 1.125;
  --ids-type-scale-sm-1: 10px;
  --ids-type-scale-sm-2: 12px;
  --ids-type-scale-sm-3: 14px;
  --ids-type-scale-md-1: 16px;
  --ids-type-scale-md-2: 18px;
  --ids-type-scale-md-3: 20px;
  --ids-type-scale-lg-1: 22px;
  --ids-type-scale-lg-2: 24px;
  --ids-type-scale-lg-3: 32px;
  --ids-type-scale-xl-1: 48px;
  --ids-type-scale-xl-2: 60px;
  --ids-type-scale-xl-3: 72px;
}

@media screen and (max-width: 480px) {
  :root {
    --ids-type-scale-sm-1: calc(10px+2px);
    --ids-type-scale-sm-2: calc(12px+2px);
    --ids-type-scale-sm-3: calc(14px+2px);
    --ids-type-scale-md-1: calc(16px/1.125);
    --ids-type-scale-md-2: calc(18px/1.125);
    --ids-type-scale-md-3: calc(20px/1.125);
    --ids-type-scale-lg-1: calc(22px/1.125);
    --ids-type-scale-lg-2: calc(24px/1.125);
    --ids-type-scale-lg-3: calc(32px/1.125);
    --ids-type-scale-xl-1: calc(48px/1.125);
    --ids-type-scale-xl-2: calc(60px/1.125);
    --ids-type-scale-xl-3: calc(72px/1.125);
  }
}

settings.json

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