How to write CSS media queries using SASS mixins

Introduction

If you’re a web developer, then you already know that writing media queries can be intimidating, especially when there is a big project with a lot breakpoints. Trust me, I know how you feel. That’s why you need a foolproof and reliable way of writing them, wherever and whenever you need them. For this, all you need are mixins and some control directives that are provided to us by the SASS (SCSS) syntax.

If you’re new to all this… That’s totally cool. I was new, too, a few months ago. All you need to know is how to write CSS because that’s what we are gonna do. So, SASS, as I mentioned earlier, is CSS but with some superpowers. Have you ever wondered if you could use variables, nested rules, or even functions inside CSS? Well, you can do that and more you can do with Sass. The best part is that you can get started with Sass for free with their docs.

Getting started

Enough chatter, let’s start the fun. I’m gonna just show you how to transform the way of writing media queries to save some time.

I am assuming you already use SASS/SCSS in your project and are familiar how to set them up. So, let us begin with _mixins.scss, where we will put all the nuances required for our media queries like viewports, breakpoints, and some quirky SCSS.

// respond is the name of your mixin

@mixin respond(＄breakpoint) {
  // ＄breakpoint is simply a variable that can have several values

  @if ＄breakpoint==tablet {
    // here `laptop` is the value of ＄breakpoint
    // when call laptop, we mean the following piece of code

    @media only screen and (max-width: 600px) {
      @content;
    }
  }

  @if ＄breakpoint==mobile {
    @media only screen and (max-width: 480px) {
      @content;
    }
  }
}

Now, we will use those media queries in our _layouts.scss file, where we are styling a .main class:

.main {
  background: red;
  // normal styling code here

  @include respond(tablet) {
    background: green;
    // responsive code for tablet viewport i.e. 600px
  }

  @include respond(mobile) {
    background: blue;
    // responsive code for mobile viewport i.e. 480px
  }
}

And that’s a wrap. This is all we need to do to write more reliable media queries. Later on, this code will go through your SASS compiler and generate the following code:

.main {
  background: red;

  @media only screen and (max-width: 600px) {
    background: green;
  }

  @media only screen and (max-width: 480px) {
    background: blue;
  }
}

Conclusion

You’re now a master in writing reliable CSS media queries. This will save you ton of time if used to it’s maximum and will give you a less confusing way to maintain your code. Now, it’s your turn to build something wonderful with this superpower.

Code

Try resizing your browser and see how the background color changes.