Creating a Dead Simple Sass Mixin to Handle Responsive Breakpoints

Simplifying syntax and responsive code organization

UPDATE: I’ve further outlined a refactoring of this concept in another post.

Mobile web use continues to grow and responsive design as a solution isn’t going anywhere any time soon. But I have a dark secret. While I love building responsive sites, I find remembering and typing the syntax for media queries frustrating. It’s not difficult really, it’s just tedious and it feels messy. Using Sass can simplify the process not only in making breakpoint management easier and abstracting syntax, but Sass has features to make the organization of your code better as well.

Building Off of Bootstrap

I’m a Bootstrap user so most of my sites focus on the four different breakpoints built into Bootstrap 3’s responsive framework.

• 767px wide and below
• 768px wide and up
• 992px wide and up
• 1200px wide and up

The Bootstrap framework references these with classes containing names of xs, sm, md, and lg when using grid columns or determining item visibility. Let’s start by using these breakpoints as the basis for our mixin.