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. I just couldn’t visualize 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 and a mixin does make adding media queries easier, I adopted using Chris Coyier’s handy Sass Breakpoint mixin. The one thing I wasn’t crazy about was the mixin was not a mobile first setup, so I modified it because once you start setting up your code to be a mobile first structure, you won’t ever go back.
It wasn’t long before I needed a custom breakpoint and again modified it. The concept of being able to add a custom breakpoint of any value whenever you need one is very refreshing, 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 predefined media query breakpoints is very powerful and adding them in the class they pertain to ended up being better for organization.
The most important thing is the Sass mixin increased my overall workflow speed, especially when combined with a SublimeText snippet, 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%;
}
}
Update: Added Codepen demo to show an example.
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>
