SCSS

by Wagner Souza

HTML

<h1>h1 - Homepage</h1>
<h2>h2 - Homepage</h2>
<h3>h3 - Homepage</h3>
<h4>h4 - Homepage</h4>
<h5>h5 - Homepage</h5>
<h6>h6 - Homepage</h6>

SCSS

@function map-deep-get($map, $keys...) {
  @each $key in $keys {
    $map: map-get($map, $key);
  }

  @return $map;
}

$header-items: 'h1', 'h2', 'h3', 'h4', 'h5', 'h6';

$header-styles: (
  default: (
    'h1': ('font-size': 42px),
    'h2': ('font-size': 36px),
    'h3': ('font-size': 25px),
    'h4': ('font-size': 19px),
    'h5': ('font-size': 14px),
    'h6': ('font-size': 10px)
  )
);

@each $header-item in $header-items {
  #{$header-item} {
    font-size: map-deep-get($header-styles, default, $header-item, font-size);
  }
}