Generated by SassMeister.com.

input.scss

$headline-variants: (
  'h1': (
    'font-size': 64px,
    'font-weight': 700,
    'line-height': 70px,
  ),
  'h2': (
    'font-size': 44px,
    'font-weight': 700,
    'line-height': 52px,
  ),
  'h3': (
    'font-size': 32px,
    'font-weight': 700,
    'line-height': 40px,
  ),
  'h4': (
    'font-size': 28px,
    'font-weight': 700,
    'line-height': 32px,
  ),
  'h5': (
    'font-size': 22px,
    'font-weight': 700,
    'line-height': 24px,
  ),
  'h6': (
    'font-size': 18px,
    'font-weight': 700,
    'line-height': 22px,
  ),
) !default;


@each $variant, $variantObject in $headline-variants {
    #{$variant} {
      /**/
    }
    .typo-#{$variant} {
      /**/
    }
}

output.css

h1 {
  /**/
}

.typo-h1 {
  /**/
}

h2 {
  /**/
}

.typo-h2 {
  /**/
}

h3 {
  /**/
}

.typo-h3 {
  /**/
}

h4 {
  /**/
}

.typo-h4 {
  /**/
}

h5 {
  /**/
}

.typo-h5 {
  /**/
}

h6 {
  /**/
}

.typo-h6 {
  /**/
}

settings.json

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