This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.
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; } }

About north street
We engineer the thoughtful transformation of great organizations. Our proven process helps us understand what your competitors are doing right — and wrong. Want to learn more? Let’s chat.