Generated by SassMeister.com.

input.scss

//@use 'core/mixins';
//@use 'variables' as *;

$_breakpoints: (
  'tablet': 650px,
  'desktop': 992px,
  'hd': 1280px,
) !default;

@mixin breakpoint($break) {
  @if map-has-key($map: $_breakpoints, $key: $break) {
    @media only screen and (min-width: map-get($_breakpoints, $break)) {
      @content;
    }
  } @else if $break == small {
    @media only screen and (max-width: 600px) {
      @content;
    }
  } 
}

@function getTypographyStyle($variantType, $size, $breakpoint: null) {
	@if $breakpoint {
		@return size-#{$variantType}-#{$size}-#{$breakpoint}
	}

	@else {
		@return size-#{$variantType}-#{$size}
	}
}

$variantTypes: link, heading, normal;
$sizes: xs, sm, md, lg, xl, 2xl, 3xl, 4xl;
$breakpoints: tablet, desktop, hd;

@each $variantType in $variantTypes {
	@each $size in $sizes {
		.#{getTypographyStyle($variantType, $size)} {
			font-size: var(--size-font-#{$variantType}-#{$size}, getFontSizeCssVariable($size))
		}

		@each $breakpoint in $breakpoints {
			@include breakpoint($breakpoint) {
				.#{getTypographyStyle($variantType, $size, $breakpoint)} {
					font-size: var(--size-font-#{$variantType}-#{$size}, getFontSizeCssVariable($size))
				}
			}
		}
	}
}

output.css

.size-link-xs {
  font-size: var(--size-font-link-xs, getFontSizeCssVariable(xs));
}

@media only screen and (min-width: 650px) {
  .size-link-xs-tablet {
    font-size: var(--size-font-link-xs, getFontSizeCssVariable(xs));
  }
}
@media only screen and (min-width: 992px) {
  .size-link-xs-desktop {
    font-size: var(--size-font-link-xs, getFontSizeCssVariable(xs));
  }
}
@media only screen and (min-width: 1280px) {
  .size-link-xs-hd {
    font-size: var(--size-font-link-xs, getFontSizeCssVariable(xs));
  }
}
.size-link-sm {
  font-size: var(--size-font-link-sm, getFontSizeCssVariable(sm));
}

@media only screen and (min-width: 650px) {
  .size-link-sm-tablet {
    font-size: var(--size-font-link-sm, getFontSizeCssVariable(sm));
  }
}
@media only screen and (min-width: 992px) {
  .size-link-sm-desktop {
    font-size: var(--size-font-link-sm, getFontSizeCssVariable(sm));
  }
}
@media only screen and (min-width: 1280px) {
  .size-link-sm-hd {
    font-size: var(--size-font-link-sm, getFontSizeCssVariable(sm));
  }
}
.size-link-md {
  font-size: var(--size-font-link-md, getFontSizeCssVariable(md));
}

@media only screen and (min-width: 650px) {
  .size-link-md-tablet {
    font-size: var(--size-font-link-md, getFontSizeCssVariable(md));
  }
}
@media only screen and (min-width: 992px) {
  .size-link-md-desktop {
    font-size: var(--size-font-link-md, getFontSizeCssVariable(md));
  }
}
@media only screen and (min-width: 1280px) {
  .size-link-md-hd {
    font-size: var(--size-font-link-md, getFontSizeCssVariable(md));
  }
}
.size-link-lg {
  font-size: var(--size-font-link-lg, getFontSizeCssVariable(lg));
}

@media only screen and (min-width: 650px) {
  .size-link-lg-tablet {
    font-size: var(--size-font-link-lg, getFontSizeCssVariable(lg));
  }
}
@media only screen and (min-width: 992px) {
  .size-link-lg-desktop {
    font-size: var(--size-font-link-lg, getFontSizeCssVariable(lg));
  }
}
@media only screen and (min-width: 1280px) {
  .size-link-lg-hd {
    font-size: var(--size-font-link-lg, getFontSizeCssVariable(lg));
  }
}
.size-link-xl {
  font-size: var(--size-font-link-xl, getFontSizeCssVariable(xl));
}

@media only screen and (min-width: 650px) {
  .size-link-xl-tablet {
    font-size: var(--size-font-link-xl, getFontSizeCssVariable(xl));
  }
}
@media only screen and (min-width: 992px) {
  .size-link-xl-desktop {
    font-size: var(--size-font-link-xl, getFontSizeCssVariable(xl));
  }
}
@media only screen and (min-width: 1280px) {
  .size-link-xl-hd {
    font-size: var(--size-font-link-xl, getFontSizeCssVariable(xl));
  }
}
.size-link-2xl {
  font-size: var(--size-font-link-2xl, getFontSizeCssVariable(2xl));
}

@media only screen and (min-width: 650px) {
  .size-link-2xl-tablet {
    font-size: var(--size-font-link-2xl, getFontSizeCssVariable(2xl));
  }
}
@media only screen and (min-width: 992px) {
  .size-link-2xl-desktop {
    font-size: var(--size-font-link-2xl, getFontSizeCssVariable(2xl));
  }
}
@media only screen and (min-width: 1280px) {
  .size-link-2xl-hd {
    font-size: var(--size-font-link-2xl, getFontSizeCssVariable(2xl));
  }
}
.size-link-3xl {
  font-size: var(--size-font-link-3xl, getFontSizeCssVariable(3xl));
}

@media only screen and (min-width: 650px) {
  .size-link-3xl-tablet {
    font-size: var(--size-font-link-3xl, getFontSizeCssVariable(3xl));
  }
}
@media only screen and (min-width: 992px) {
  .size-link-3xl-desktop {
    font-size: var(--size-font-link-3xl, getFontSizeCssVariable(3xl));
  }
}
@media only screen and (min-width: 1280px) {
  .size-link-3xl-hd {
    font-size: var(--size-font-link-3xl, getFontSizeCssVariable(3xl));
  }
}
.size-link-4xl {
  font-size: var(--size-font-link-4xl, getFontSizeCssVariable(4xl));
}

@media only screen and (min-width: 650px) {
  .size-link-4xl-tablet {
    font-size: var(--size-font-link-4xl, getFontSizeCssVariable(4xl));
  }
}
@media only screen and (min-width: 992px) {
  .size-link-4xl-desktop {
    font-size: var(--size-font-link-4xl, getFontSizeCssVariable(4xl));
  }
}
@media only screen and (min-width: 1280px) {
  .size-link-4xl-hd {
    font-size: var(--size-font-link-4xl, getFontSizeCssVariable(4xl));
  }
}
.size-heading-xs {
  font-size: var(--size-font-heading-xs, getFontSizeCssVariable(xs));
}

@media only screen and (min-width: 650px) {
  .size-heading-xs-tablet {
    font-size: var(--size-font-heading-xs, getFontSizeCssVariable(xs));
  }
}
@media only screen and (min-width: 992px) {
  .size-heading-xs-desktop {
    font-size: var(--size-font-heading-xs, getFontSizeCssVariable(xs));
  }
}
@media only screen and (min-width: 1280px) {
  .size-heading-xs-hd {
    font-size: var(--size-font-heading-xs, getFontSizeCssVariable(xs));
  }
}
.size-heading-sm {
  font-size: var(--size-font-heading-sm, getFontSizeCssVariable(sm));
}

@media only screen and (min-width: 650px) {
  .size-heading-sm-tablet {
    font-size: var(--size-font-heading-sm, getFontSizeCssVariable(sm));
  }
}
@media only screen and (min-width: 992px) {
  .size-heading-sm-desktop {
    font-size: var(--size-font-heading-sm, getFontSizeCssVariable(sm));
  }
}
@media only screen and (min-width: 1280px) {
  .size-heading-sm-hd {
    font-size: var(--size-font-heading-sm, getFontSizeCssVariable(sm));
  }
}
.size-heading-md {
  font-size: var(--size-font-heading-md, getFontSizeCssVariable(md));
}

@media only screen and (min-width: 650px) {
  .size-heading-md-tablet {
    font-size: var(--size-font-heading-md, getFontSizeCssVariable(md));
  }
}
@media only screen and (min-width: 992px) {
  .size-heading-md-desktop {
    font-size: var(--size-font-heading-md, getFontSizeCssVariable(md));
  }
}
@media only screen and (min-width: 1280px) {
  .size-heading-md-hd {
    font-size: var(--size-font-heading-md, getFontSizeCssVariable(md));
  }
}
.size-heading-lg {
  font-size: var(--size-font-heading-lg, getFontSizeCssVariable(lg));
}

@media only screen and (min-width: 650px) {
  .size-heading-lg-tablet {
    font-size: var(--size-font-heading-lg, getFontSizeCssVariable(lg));
  }
}
@media only screen and (min-width: 992px) {
  .size-heading-lg-desktop {
    font-size: var(--size-font-heading-lg, getFontSizeCssVariable(lg));
  }
}
@media only screen and (min-width: 1280px) {
  .size-heading-lg-hd {
    font-size: var(--size-font-heading-lg, getFontSizeCssVariable(lg));
  }
}
.size-heading-xl {
  font-size: var(--size-font-heading-xl, getFontSizeCssVariable(xl));
}

@media only screen and (min-width: 650px) {
  .size-heading-xl-tablet {
    font-size: var(--size-font-heading-xl, getFontSizeCssVariable(xl));
  }
}
@media only screen and (min-width: 992px) {
  .size-heading-xl-desktop {
    font-size: var(--size-font-heading-xl, getFontSizeCssVariable(xl));
  }
}
@media only screen and (min-width: 1280px) {
  .size-heading-xl-hd {
    font-size: var(--size-font-heading-xl, getFontSizeCssVariable(xl));
  }
}
.size-heading-2xl {
  font-size: var(--size-font-heading-2xl, getFontSizeCssVariable(2xl));
}

@media only screen and (min-width: 650px) {
  .size-heading-2xl-tablet {
    font-size: var(--size-font-heading-2xl, getFontSizeCssVariable(2xl));
  }
}
@media only screen and (min-width: 992px) {
  .size-heading-2xl-desktop {
    font-size: var(--size-font-heading-2xl, getFontSizeCssVariable(2xl));
  }
}
@media only screen and (min-width: 1280px) {
  .size-heading-2xl-hd {
    font-size: var(--size-font-heading-2xl, getFontSizeCssVariable(2xl));
  }
}
.size-heading-3xl {
  font-size: var(--size-font-heading-3xl, getFontSizeCssVariable(3xl));
}

@media only screen and (min-width: 650px) {
  .size-heading-3xl-tablet {
    font-size: var(--size-font-heading-3xl, getFontSizeCssVariable(3xl));
  }
}
@media only screen and (min-width: 992px) {
  .size-heading-3xl-desktop {
    font-size: var(--size-font-heading-3xl, getFontSizeCssVariable(3xl));
  }
}
@media only screen and (min-width: 1280px) {
  .size-heading-3xl-hd {
    font-size: var(--size-font-heading-3xl, getFontSizeCssVariable(3xl));
  }
}
.size-heading-4xl {
  font-size: var(--size-font-heading-4xl, getFontSizeCssVariable(4xl));
}

@media only screen and (min-width: 650px) {
  .size-heading-4xl-tablet {
    font-size: var(--size-font-heading-4xl, getFontSizeCssVariable(4xl));
  }
}
@media only screen and (min-width: 992px) {
  .size-heading-4xl-desktop {
    font-size: var(--size-font-heading-4xl, getFontSizeCssVariable(4xl));
  }
}
@media only screen and (min-width: 1280px) {
  .size-heading-4xl-hd {
    font-size: var(--size-font-heading-4xl, getFontSizeCssVariable(4xl));
  }
}
.size-normal-xs {
  font-size: var(--size-font-normal-xs, getFontSizeCssVariable(xs));
}

@media only screen and (min-width: 650px) {
  .size-normal-xs-tablet {
    font-size: var(--size-font-normal-xs, getFontSizeCssVariable(xs));
  }
}
@media only screen and (min-width: 992px) {
  .size-normal-xs-desktop {
    font-size: var(--size-font-normal-xs, getFontSizeCssVariable(xs));
  }
}
@media only screen and (min-width: 1280px) {
  .size-normal-xs-hd {
    font-size: var(--size-font-normal-xs, getFontSizeCssVariable(xs));
  }
}
.size-normal-sm {
  font-size: var(--size-font-normal-sm, getFontSizeCssVariable(sm));
}

@media only screen and (min-width: 650px) {
  .size-normal-sm-tablet {
    font-size: var(--size-font-normal-sm, getFontSizeCssVariable(sm));
  }
}
@media only screen and (min-width: 992px) {
  .size-normal-sm-desktop {
    font-size: var(--size-font-normal-sm, getFontSizeCssVariable(sm));
  }
}
@media only screen and (min-width: 1280px) {
  .size-normal-sm-hd {
    font-size: var(--size-font-normal-sm, getFontSizeCssVariable(sm));
  }
}
.size-normal-md {
  font-size: var(--size-font-normal-md, getFontSizeCssVariable(md));
}

@media only screen and (min-width: 650px) {
  .size-normal-md-tablet {
    font-size: var(--size-font-normal-md, getFontSizeCssVariable(md));
  }
}
@media only screen and (min-width: 992px) {
  .size-normal-md-desktop {
    font-size: var(--size-font-normal-md, getFontSizeCssVariable(md));
  }
}
@media only screen and (min-width: 1280px) {
  .size-normal-md-hd {
    font-size: var(--size-font-normal-md, getFontSizeCssVariable(md));
  }
}
.size-normal-lg {
  font-size: var(--size-font-normal-lg, getFontSizeCssVariable(lg));
}

@media only screen and (min-width: 650px) {
  .size-normal-lg-tablet {
    font-size: var(--size-font-normal-lg, getFontSizeCssVariable(lg));
  }
}
@media only screen and (min-width: 992px) {
  .size-normal-lg-desktop {
    font-size: var(--size-font-normal-lg, getFontSizeCssVariable(lg));
  }
}
@media only screen and (min-width: 1280px) {
  .size-normal-lg-hd {
    font-size: var(--size-font-normal-lg, getFontSizeCssVariable(lg));
  }
}
.size-normal-xl {
  font-size: var(--size-font-normal-xl, getFontSizeCssVariable(xl));
}

@media only screen and (min-width: 650px) {
  .size-normal-xl-tablet {
    font-size: var(--size-font-normal-xl, getFontSizeCssVariable(xl));
  }
}
@media only screen and (min-width: 992px) {
  .size-normal-xl-desktop {
    font-size: var(--size-font-normal-xl, getFontSizeCssVariable(xl));
  }
}
@media only screen and (min-width: 1280px) {
  .size-normal-xl-hd {
    font-size: var(--size-font-normal-xl, getFontSizeCssVariable(xl));
  }
}
.size-normal-2xl {
  font-size: var(--size-font-normal-2xl, getFontSizeCssVariable(2xl));
}

@media only screen and (min-width: 650px) {
  .size-normal-2xl-tablet {
    font-size: var(--size-font-normal-2xl, getFontSizeCssVariable(2xl));
  }
}
@media only screen and (min-width: 992px) {
  .size-normal-2xl-desktop {
    font-size: var(--size-font-normal-2xl, getFontSizeCssVariable(2xl));
  }
}
@media only screen and (min-width: 1280px) {
  .size-normal-2xl-hd {
    font-size: var(--size-font-normal-2xl, getFontSizeCssVariable(2xl));
  }
}
.size-normal-3xl {
  font-size: var(--size-font-normal-3xl, getFontSizeCssVariable(3xl));
}

@media only screen and (min-width: 650px) {
  .size-normal-3xl-tablet {
    font-size: var(--size-font-normal-3xl, getFontSizeCssVariable(3xl));
  }
}
@media only screen and (min-width: 992px) {
  .size-normal-3xl-desktop {
    font-size: var(--size-font-normal-3xl, getFontSizeCssVariable(3xl));
  }
}
@media only screen and (min-width: 1280px) {
  .size-normal-3xl-hd {
    font-size: var(--size-font-normal-3xl, getFontSizeCssVariable(3xl));
  }
}
.size-normal-4xl {
  font-size: var(--size-font-normal-4xl, getFontSizeCssVariable(4xl));
}

@media only screen and (min-width: 650px) {
  .size-normal-4xl-tablet {
    font-size: var(--size-font-normal-4xl, getFontSizeCssVariable(4xl));
  }
}
@media only screen and (min-width: 992px) {
  .size-normal-4xl-desktop {
    font-size: var(--size-font-normal-4xl, getFontSizeCssVariable(4xl));
  }
}
@media only screen and (min-width: 1280px) {
  .size-normal-4xl-hd {
    font-size: var(--size-font-normal-4xl, getFontSizeCssVariable(4xl));
  }
}

settings.json

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