Responsive Header Generation & Management with Sass

responsive-headings.scss

/* 
*  Responsive Heading Generation with Sass 
*  Type scale borrowed from: http://typecast.com/blog/a-more-modern-scale-for-web-typography 
*/

// Config Map of font-size and line-height values for each Heading level at each page breakpoint
$headers-responsive : (
  1: (
    xs: ( font-size: 2rem, line-height: 1.25 ),
    md: ( font-size: 2.5rem, line-height: 1.125 ),
    lg: ( font-size: 3rem, line-height: 1.05 )
    ),
  2: (
    xs: ( font-size: 1.625rem, line-height: 1.15384615 ),
    md: ( font-size: 2rem, line-height: 1.25 ),
    lg: ( font-size: 2.25rem, line-height: 1.25 )
    ),
  3: (
    xs: ( font-size: 1.375rem, line-height: 1.13636364 ),
    md: ( font-size: 1.5rem, line-height: 1.25 ),
    lg: ( font-size: 1.75rem, line-height: 1.25 )
    ),
  4: (
    xs: ( font-size: 1.125rem, line-height: 1.11111111 ),
    md: ( font-size: null, line-height: 1.22222222 ),
    lg: ( font-size: null, line-height: null )
    ),
  5: (
    xs: ( font-size: 1.25rem, line-height: null ),
    md: ( font-size: 1.25rem, line-height: null ),
    lg: ( font-size: 1.25rem, line-height: null )
    ),
  6: (
    xs: ( font-size: 1rem, line-height: null ),
    md: ( font-size: 1rem, line-height: null),
    lg: ( font-size: 1rem, line-height: null)
    )
  );

// Mixins to Generate Headings
@mixin font-settings($header, $size) {
  @if map-has-key($header, $size) {
    @media (min-width: map-get($grid-breakpoints, $size)) {
      $font-size: map-get(map-get($header, $size), 'font-size');
      $line-height: map-get(map-get($header, $size), 'line-height');
      @if $font-size != null {
        font-size: $font-size;
      }
      @if $line-height != null {
        line-height: $line-height;
      }
    }
  }
}
@mixin responsive-headings($headers) {
  $everything-okay: true;
  @if type-of($headers) != map {
    @warn "`#{$headers}` is not a map for `responsive-headings`.";
    $everything-okay: false;
  }
  @if $everything-okay {
    $iterator: 0;
    @each $headers, $header in $headers {
      $iterator: $iterator + 1;
      h#{$iterator}, .h#{$iterator} { // open sass declaration
        @include font-settings($header, 'xs');
        @include font-settings($header, 'md');
        @include font-settings($header, 'lg');
      } // close sass declaration
    } 
  }  
}

// Generate Responsive Headings Now!
@include responsive-headings($headers-responsive);