Quick heading selectors (using iterations through lists), quickly and cleanly style h1 - h6 tags, either programmatically or statically, allows use of the iteration index as a variable through the Sass functions `@each()` and `index(...)`. WARNING: Requires Bourbon Mixin Library.

_quickHeadingSelectors.scss

//* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
//
//                                  * * * * * * * * * * * * * * * * * * * * *
//                                  * * * REQUIRES BOUBON MIXIN LIBRARY * * *
//                                  * * *       http://bourbon.io/      * * *
//                                  * * * * * * * * * * * * * * * * * * * * *
//
//
//       Quick Heading Selectors (Using Iterations Through Lists).
//      ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
//      - Quickly and cleanly style h1-h6
//      - programmatically or staticly,
//      - allows use of iteration index as a variable.
//      - Makes use of the Sass @each() function and
//      - the index(...) function.
//
//      More specifically, this will setup the heading selectors
//      so that their font-size 'cascades' down the Modular Scale,
//      with each subsequent heading decrementing (inversly of the
//      incrementing index variable).
//        - To customize this, change the '$max-heading-font-size'
//          variable to whatever increment of the Modular Scale
//          the largest heading (h1) should scale down from.
//
//      It is also inteded/expected that specific heading styles
//      can/will be overridden later on, as more individualistic
//      and specific styles become necessary.
//
//* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 

//  The heading selectors list
$heading-selectors: h1, h2, h3, h4, h5, h6;

//  Font size of <h1> (a.k.a., the largest font size of the headings),
//  expressed as an increment of the Modular Scale.
$max-heading-font-size: 3;

//  Iterate through each item in the heading selector list, styling each item...
@each $heading-selector in $heading-selectors {
  
  //  Set the current iteration index to a variable
  $i: index($heading-selectors, $heading-selector);
  
  //  Dynamically create the heading's tag using
  //  the current index ('h'+[index number]),
  //  and then style it.
  h#{$i} {
    
    //  Increase `$max-heading...` variable by 1.
    //    - this is just a convienience method to
    //      avoid having to set the 'max heading font size'
    //      higher than it will actually end up...
    //      ( this is because, unlike typical arrays,
    //        Sass lists count the first item as index: 1,
    //        instead of index: 0 )
    //      So without this, even though the maximum size
    //        for a heading was set to (for example) '3',
    //        the actual largest header would be '2', and
    //        the size of all the subsequent headings would
    //        be shifted down.
    $max-size: $max-heading-font-size + 1;                
    
    //  Subtract from index value from `$max-heading`,
    //      (remember: technically, $max-heading is now secretly
    //       ONE MORE than it was originally set to)
    //
    //    - effectively inversing (sort of) the heading
    //      number (e.g., h2 -> == 2) to it's corresponding
    //      modular scale increment based font-size, which
    //      is relative to the 'max heading font size' that
    //      was set earlier.
    //    (i.e.,
    //          max-font-size = 3 ;
    //          so <h1>'s font-size = modular-scale(3) ;
    //            - (if the modular scale ratio is 1.333, and base is 16px,
    //              that's roughly 2.3em, which is about 60px)
    //          
    //          ... then h2's font size would be (3 - 1) = 2
    //              (or, modular-scale(2) => 1.7em => 45px
    //
    //          ... and h3's font size would be (3 - 2) = 1
    //              (or, modular-scale(1) => 1.333em => 34px
    $this-heading-size: $max-size - $i;
    
    
    // ... Set this heading's font size to the value set from the previous statement.
    font-size: modular-scale($this-heading-size);
    
    /*
     *  Other static properties...
     *  These aren't important at all to this demo,
     *  or applied use of this code.
     */
    
    margin-bottom: 1rem;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: -1px;
  }
}

// BELOW:
// OPTIONAL STYLES TO USE OR DELETE...

/* Heading(s) specific overrides:

h4, h5, h6 {
  letter-spacing: 1px;
  font-weight: 300;
  text-transform: uppercase;
  color: darkgray;
}
*/