ish2f4f ish2f4f - 1 month ago 10
Sass (Sass) Question

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

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

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.

Comments