While going through a redesign of my website, I forced myself to place the media queries inside each #id and .class using SASS, instead of at the bottom in a huge clump. The idea of this isn’t something new and if you are using gzip there are no performance drawbacks. However, I couldn’t in my mind rationalize why having media queries spread all through the document would be better than having them in a nice organized block at the bottom of the CSS.

Using SASS/Compass can make adding media queries easier, I adopted using Chris Coyier’s handy SASS Breakpoint mixin. It didn’t take long for me to start modifying it, especially since I almost never use max width breakpoints. It didn’t “feel” very mobile-first to me, so I converted that portion of it.

Shortly after, I needed a custom breakpoint and again modified it. The concept of being able to add a breakpoint of any value whenever you need one is very refreshing and is best summed up by Stephen Hay.

Start with the small screen first, then expand until it looks like shit. Time to insert a breakpoint!

The revelation of not being so bound to set media query breakpoints is very powerful and adding them in the class they pertain to ended up not being an issue with organization at all. Using the SASS mixin has definitely increased my overall workflow speed which is probably the greatest benefit.

SASS Media Query Breakpoint Mixin

@mixin breakpoint($point) {
    @if $point == medium {
        @media (min-width: 30em)  { @content; }
    }
    @else if $point == large {
        @media (min-width: 50em) { @content; }
    }
    @else if $point { // allows custom breakpoints
        @media (min-width: $point) { @content; }
    }
}

SASS Breakpoint Usage

.content {
    // mobile-first styles here
    // the idea is styles here will work for mobile all the way to desktop
    // you then override the styles with the breakpoints below as things get more complex or additional functionality is needed

    @include breakpoint(medium) {
        // medium defined breakpoint styles
        // this is where you put styles that are applied to medium and large
    }
    @include breakpoint(large) {
        // large defined breakpoint styles
        // this is where you put styles that are only applied to large
    }
    @include breakpoint(80em) {
        // custom defined breakpoint styles
        // this is where you can add any value and create any additional media query you need
    }
}

Why Medium and Large?

Someone might wonder why I chose to use medium and large as breakpoints instead of only custom variations. It has to do with I like to have multiple things happen at the same time and felt safer to have things like the layout and fonts in media queries change at specific width, doing a custom width for everything is overkill, but having the option is awesome.

Yes, you can convert these to pixels if you haven’t made the leap into using em units for media queries.

Simple Breakpoint Example

This is a very simple example of changing the font size for the whole site as it scales up from mobile to desktop.

body {
    background: $background;
    font-family: $body-font;
    font-size: 100%;
    line-height: 1.625;
    color: $body-color;

    @include breakpoint(medium) {
        font-size: 112.5%;
    }
    @include breakpoint(large) {
        font-size: 125%;
    }
}

SublimeText Breakpoint Snippet

Hopefully you are using SublimeText as a text editor, if so Chris Coyier posted a video showing usage of a Sublime Snippet by James Nowland so you can output the breakpoint by just typing “mq + Tab” (or “mq + Enter” if you use Enter instead of the Tab trigger like I do to avoid conflicts with Emmet).

This snippet has been modfied to use my version of the SASS Breakpoint Mixin above, which I prefer. Josh Hibbert mentioned in comments on the video that you can insert a tab trigger after the snippet to get the cursor to tab to a new line, small optimization but very handy.

<snippet>
    <content><![CDATA[
    @include breakpoint($1) {
        $2
    }
    $3
    ]]></content>
    
    <tabTrigger>mq</tabTrigger>
    <scope>source.css, source.scss</scope>
</snippet>