How to generate sizes for all headers using SASS with modular scale

Question

I'm looking to create sizes for H1 through H6 using SCSS. This example assumes I've created the variables $base-size and $modular-scale. Specifically:

h6: $base-size * $modular-scale * 1
h5: $base-size * $modular-scale * 2
h4: $base-size * $modular-scale * 3
...
h1: $base-size * $modular-scale * 6

I can't figure out how to generate each of these classes using a mixin or a function (or whatever appropriate feature for this task).

so far I have:

@mixin make-header-size ($type, $scale) {
  .#{$type} {
    $type * $scale * (...scalar)
  }
}

Not sure how to complete the rest so that I can succinctly generate each of these sizes.

Answer 1

Here you have a simple and small @for loop to generate the six heading styles with a scale variable that indicates the amount of px the headings grow from h6 to h1:

// h6 starts at $base-font-size 
// headings grow from h6 to h1 by $heading-scale
$base-font-size: 18px;
$heading-scale: 8; // amount of px headings grow from h6 to h1

@for $i from 1 through 6 {
  h#{$i} {
    font-size: $base-font-size + $heading-scale * (6 - $i);
  }
}

And a demo codepen to play with it.