Make Your CSS Life Easier, Learn To Abstract Media Queries With SASS Mixins

Digging into the trenches of responsive design can be surprisingly daunting, especially if you’re new to this kind of thing. The amount of shiny front-end build tools seems overwhelming at first, but they are ultimately here to help you.

In this post, we’re looking at a shiny build tool called SASS. It’s actually not that shiny, it’s been around for years, acting as a superset for css. This post assumes you have delved into basic features such as variables, css selector nesting, and maybe mixins.

The Problem

Crafting a responsive layout that works on multiple screens is hard enough. Nevermind the quirks each browser introduces. Luckily, SASS can make your media queries more explicit and cleaner. Let’s quickly explore the benefits of abstracting your media queries.

• Cleaner code: Defining an entire media query takes up a long, ugly line of code. This doesn’t seem like a big deal until you have 5-10 in a single .scss file alone.
• More explicit: It takes a second or two to know what’s going on with a media query. Mixins let you give your own definition of what a query does(more on this in a bit).
• Easier to organize: It’s simply easier, and more pleasant to move around explicit, smaller query definitions.

An Example

You’d traditionally define a media query like this: @media screen and (max-width: 600px) {} When you look at this, you first understand that 600px is for a fairly large mobile screen, or a small tablet screen, and that 600px is the maximum value that you apply this particular style too. It’s not terribly complicated, but it can be made much simpler.

What if you could call a mobile-only style with something like @include atSmall{}. Not bad at all! By looking at this, it’s immediately obvious that these styles will be applied to small screens. For a medium screen only, you can use something like @include atMediumOnly{}to very explicitly define that these styles are for tablet/medium screen sizes.

Hell, you can use whatever name is most descriptive to you, that’s the important part. So how can you use SASS to accomplish this for all of your media queries?

Define Your Mixins

To kick this tutorial off, let’s first define our breakpoint variables. Instead of using the value directly, it’s important to have variables to account for changes later on. In other words, if you want to change the $MEDIUM breakpoint, you’re not going to want to change it in 3+ different places.

I usually use something like:

$LARGE: 1400px;
$MEDIUM: 1024px;
$SIDEBAR: 992px;
$TABLET: 800px;
$SMALL: 600px;
$TINY: 400px;

Now that we have our desired breakpoints, let’s define our media query mixins. Before diving into this, you should know how to create and call a mix-in. Use the examples from the official docs if you need a refresher.

Make a file that stores your mixins, and let’s start with a large screen media query.

Define your mixin:

@mixin atLarge() {

}

Mixins work a lot like functions, and can even take arguments.

When we call @include atLarge, a chunk of code will be replaced at that call, which is defined in our actual mixin file. All we want to do is perform the actual media query on the code we pass into the mixin.

Let’s define the large screen media query in our mixin:

@mixin atLarge() {
  @media screen and (min-width: $MEDIUM) {
    @content;
  }
}

Now, whenever we use @include atLarge, we pass in the styles to be applied, and behind the scenes, the media query does its work. All of this without ever having to stare at the actual media query.

You may be wondering what the @content call is for. When we call our mixin, let’s say we want to limit a divs width to 1200px only on large screens. We’d call it with something like:

#limitDivwidth {
    @include atLarge {
        max-width: 1200px;
    }
}

This is equivalent to:

#limitDivwidth {
    @media screen and (min-width: $MEDIUM) {
        max-width: 1200px;
    }
}

When we need a div to have specific sizes across all screen sizes for example, it’s much easier to read something like:

#changeDivSize {
    @include atLarge {
        width: 1200px;
    }

    @include atMedium {
        width: 600px;
    }

    @include atSmall {
        width: 340px;
    }
}

You shouldn’t always have to explicitly define a style across all screen sizes(just use width:100% or a more flexible value), but it can come up. Once you write more complex media queries, for example a double media query for when you define a range, abstraction starts to become increasingly handy.

Generally, you should make two different mixins for each screen size. For small, have atSmall() and atSmallAndUp(). Same with medium and large screen sizes.

Conclusion

Typical use cases include max and min ranges on small, mobile, tablet, and large screen sizes, but use whatever works for you! I personally use about 10 mixins, some for sidebar sizes and hover states. It seems wonky at first, but quickly becomes comfortable and logical, just like SASS itself 🙂