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.

Solution 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.

Solution 2

Just a small function that I have created

$types : h6 h5 h4 h3 h2 h1;
$base-size : 16px;

$modular-scale : 0.5;
@each $type in $types{
  #{$type} {
    font-size : $base-size * $modular-scale;
    $modular-scale : $modular-scale + 1;
  }
}

See the PEN

I'm using this function for my personal use.

$headings : h1 h2 h3 h4 h5 h6;
$font-size-base : 16px;

$font-size-upper : 36px;
$font-size-dec : 4px;
@each $heading in $headings{
  #{$heading} {
    font-size : $font-size-upper;
    font-size : ($font-size-upper / $font-size-base) + em;
  }
  $font-size-upper : $font-size-upper - $font-size-dec;
}

Check it out.

Solution 3

@Fabian's and @Jinu's answers are pretty good. However, I wanted my scss sizes to be context and screen-size dependent. Here's my mobile-first solution, which I arrived at by merging @Fabian, this blog post, and a media-query mixin. Note while you look over the code, that if your context is not in context-font, no font-size will be defined, so be wary of that.

// https://codepen.io/zgreen/post/contextual-heading-sizes-with-sass
// https://stackoverflow.com/questions/38426884/how-to-generate-sizes-for-all-headers-using-sass-with-modular-scale
//define vars and mix-ins
$context-font: ( header: 1, section: 1, article: 0.67, footer: 0.5, aside: 0.33 ); // Make fonts change size dependent upon what context they are in
$step-size-font: 0.333333; //step size for incremental font sizes
$amplifier-font-mobile: 1.2; //convenience var to in/decrease the values of header values in one place
$amplifier-font-desktop: 1.4; //convenience var to in/decrease the values of header values in one place
$on-laptop: 800px;
$margin-heading: 0.67em 0;
@mixin media-query($device) {
    //scss mobile-first media query
    @media screen and (min-width: $device) {
         @content;
    }
}
//function to generate the actual header size
@mixin heading-size($size) {
    $context-size-computed: $size * $step-size-font;
    font-size: $context-size-computed * $amplifier-font-mobile + em;
    @include media-query($on-laptop) {
        font-size: $context-size-computed * $amplifier-font-desktop + em;
    }
}
// Apply the stylings using the vars and mix-ins
// context-free header styling
@for $i from 1 through 6 {
    h#{$i} {
        font-weight: bold;
        margin: $margin-heading;
    }
}
//iterate thru all the contexts in context-font, setting the header sizes in each
@each $element, $value in $context-font {
    #{$element} {
        //set header sizes 1-6
        @for $i from 1 through 6 {
            h#{$i} {
                $bigger-size-proportional-to-smaller-number: (6-$i);
                @include heading-size($bigger-size-proportional-to-smaller-number * $value);
            }
        }
    }
}

Edit: Another (simpler/better?) way of getting context-specific font sizes is to use em font sizes, and change the font-size in your contexts. You would only do this once per context (article, section, div, whatever), and it would affect all text inside of it. That's because em is a relative font size.

Comments

[Jasur Kurbanov]

Can I use you code both for personal and commercial purposes ?