Using SASS mixins for Responsive Font Styles

Previously, in a given design, if I saw a headline or sub-headline, I’d simply style the h1 or h2 tag.

However, for a recent project I instead created a mixin with those styles, then applied the mixin to that tag. So it looks like this in the sass file:

h2 {
@include subhead;
}

The advantage here, is that if later in the design I see another font style that is similar, but shouldn’t be an h2 tag, I just include it, like this:

div.person.title {
@include subhead;
}

The advantage of this strategy, is that when it comes to making this stuff responsive, you can adjust the font sizes in the mixin, once, and be done. Here’s the mixin for that particular style:

@mixin subhead {
    font-family: $sans;
    color: #000;
    font-size: $base-font-size*0.90;
    line-height: $base-line-height*.9;
    font-weight: 600;
    letter-spacing: 0.16em;

    @include media($smedium) {
        font-size: $base-font-size*1.05;
        line-height: $base-line-height;
    }    
}