_headers.scss

// This gist creates maintainable, DRY, responsive header classes and selectors that allow for unqualified property attribution, semantic markup without class-stacking, and minimal compiled css by using a loop to create heading selectors and placeholders from a simple data structure.
// To implement, adjust the sizes in the map. Heading selectors will be compiled. Placeholders that reference the heading size can be extended in any element.
// There are issues using placeholders inside media-queries. These are being addressed.
// See the references at the top of the gist for more information.


// http://blog.millermedeiros.com/the-problem-with-css-pre-processors/
// http://thesassway.com/intermediate/understanding-placeholder-selectors
// http://www.sitepoint.com/using-sass-maps/
// http://webdesign.tutsplus.com/tutorials/all-you-ever-need-to-know-about-sass-interpolation--cms-21375
// http://thesassway.com/intermediate/if-for-each-while

$mobile-heading-size: ( h1:4.0rem, h2: 3.6rem, h3: 3.0rem, h4: 2.4rem, h5: 1.8rem, h6: 1.5rem);
$desktop-heading-size: ( h1:4.0rem, h2: 3.6rem, h3: 3.0rem, h4: 2.4rem, h5: 1.8rem, h6: 1.5rem);

// reset headers to act like normal lines
%header-reset {
    line-height: 1;
    margin: 0;
}

@mixin heading($map) {
    // apply the font sizes to the heading elements
      @for $i from 1 through 6 {
        h#{$i} {
            font-size: map-get($map, h#{$i});
            @extend header-reset;
        }
        // provides heading placeholders so qualified elements
        // can assume header styles
        %h#{$i} {
            font-size: map-get($map, h#{$i});
            @extend header-reset;
        }
    }
}

@include heading($mobile-heading-size);

// desktop headers (the desktop mixin provides a media query for desktop screens)
// @include desktop {
//     @include heading($desktop-heading-size);
// }

// usage example
// .element {
//     @extend %h1;
// }