Creating a Dead Simple Sass Mixin to Handle Responsive Breakpoints

Simplifying syntax and responsive code organization

Tim Knight
Developing with Sass
5 min readMay 5, 2014

--

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.

@mixin breakpoint($class) {
@if $class == xs {
@media (max-width: 767px) { @content; }
}

@else if $class == sm {
@media (min-width: 768px) { @content; }
}

@else if $class == md {
@media (min-width: 992px) { @content; }
}

@else if $class == lg {
@media (min-width: 1200px) { @content; }
}

@else {
@warn "Breakpoint mixin supports: xs, sm, md, lg";
}
}

The mixin alone simplifies a lot for us. We can use the two letter class signifier we alright use throughout the whole framework to remember which breakpoint we’re targeting—making it much easier to use. If we forget what class names to use and accidentally use the wrong one, we’ll be reminded with a warning message from Sass as to which values are available.

Using the Mixin Within Your Code

Built into Sass is the ability to nest our media queries within the primary code of an area we are designing…

--

--

Tim Knight
Developing with Sass

VP of Product Design @ Mad Mobile. Former Dir of UX @ GravityFree. Product Designer. Prototyper. Design Leader.