Headings Sass mixin

by ritcheyer

HTML

<h1>Lorem ipsum dolor</h1>
<h2>Lorem ipsum dolor</h2>
<h3>Lorem ipsum dolor</h3>
<h4>Lorem ipsum dolor</h4>
<h5>Lorem ipsum dolor</h5>
<h6>Lorem ipsum dolor</h6>

<div>
    <h1>Lorem ipsum dolor</h1>
    <h2>Lorem ipsum dolor</h2>
    <h3>Lorem ipsum dolor</h3>
    <h4>Lorem ipsum dolor</h4>
    <h5>Lorem ipsum dolor</h5>
    <h6>Lorem ipsum dolor</h6>
</div>

SCSS

@mixin headings($from: 1, $to: 6){
    $heading-selector: (unquote(""));
    @for $i from $from through $to {
        $heading-selector: $heading-selector, unquote("h#{$i}")
    }
    #{$heading-selector}{
        @content
    }
}

@include headings(){
    font-family:sans-serif;
}

div{
    @include headings(1, 3){
        color:#BADA55;
    }
}

JavaScript

/**
 * With thanks to @lar_zzz, @paranoida and @rowanmanning
 */