Generated by SassMeister.com.

input.scss

@each $header, $margin-bot, $font-size,
    $line-height
        in (h1, 0.5rem, 3, 1.1)
        (h2, 0.5rem, 2, 1.5)
        (h3, 1.5em, 1.4, 1.5)
        (h4, 1.5em, 1.3, 1.5)
        (h5, 0.5rem, 1.2, 1.5)
        (h6, 0.5rem, 0.9, 1.3)
{
    #{$header},
    .#{$header} {
        margin-bottom: $margin-bot;
        font-size: ($font-size) * 1rem;
        line-height: $line-height;
    }
}














$size-vars: (
  "xx-small" :    .50,
  "x-small"  :    .70,  // 11px
  'x-big'    :    1.8,  // 29px
  "xx-big"   :    2.5,  // 32px
  "huge"     :    3.75  // 60px
);



$colors: (
  "red" :    red,
  "blue"  :    blue,
);


@function color($color) {
  @return map-get($colors, $color);
}
h1 {
    color: color(red);
    font-size: 12px;
}













$font-size-big: 19px;
$font-size-default: 16px;
$font-size-small: 14px;


$font-size-h6: $font-size-default;
$font-size-h5: $font-size-h6;

h5 {
    font-size: $font-size-h5;
}

h6 {
    font-size: $font-size-h6;
}

output.css

h1,
.h1 {
  margin-bottom: 0.5rem;
  font-size: 3rem;
  line-height: 1.1;
}

h2,
.h2 {
  margin-bottom: 0.5rem;
  font-size: 2rem;
  line-height: 1.5;
}

h3,
.h3 {
  margin-bottom: 1.5em;
  font-size: 1.4rem;
  line-height: 1.5;
}

h4,
.h4 {
  margin-bottom: 1.5em;
  font-size: 1.3rem;
  line-height: 1.5;
}

h5,
.h5 {
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  line-height: 1.5;
}

h6,
.h6 {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.3;
}

h1 {
  font-size: 12px;
}

h5 {
  font-size: 16px;
}

h6 {
  font-size: 16px;
}

settings.json

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