Easy to Write Media Queries using SASS Mixins

#css #sass #beginners #webdev

Hey everyone! 👋 I have finally managed to pull up some guts and courage to write and publish my first blog post. Anyways, I am ignoring all of the introduction stuff here, coz that's always available on my profile. You're more than welcome to hit me up. 🤙

🚩 Introduction

So, you're a web developer. 👩‍💻 Then you already know writing media queries can be intimidating, especially when there is a big project and there's a lot of breakpoints. Trust me, I know how you feel. And that's why you need a foolproof and reliable way of writing them, wherever and whenever you need them.

👀 What do we need?

Relax. This ain't rocket science. We will just use the wonderful mixins and some control directives provided to us by amazing SASS (scss) syntax.

🤷‍♂️ I am new to all these.

That's totally cool 🤙, so was I months ago. All you need to know is how to write css, coz that's what we are gonna do. So, Sass as I mentioned earlier is just css but with some superpowers. Ever wondered if you could use variables, nested rules, or even functions inside CSS? That's what and more you can do with sass. The best part is, you can get started with SASS for free with their docs. 👇

SASS Docs

💻 Getting Started

Enough of chatter let's start the fun. I'm just gonna show you how to transform the way of writing media queries to save some time. You can include it in your projects right away. I am assuming you already use sass/scss in your project and are familiar with how to set up those things. Now we're good to go.

Let us begin by creating the _mixins.scss file where we shall 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 and later on, this code goes through your sass compiler and generates 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 a ton of time if used to it's maximum and will no doubt give you a less confusing way to maintain your code. Now, it's your turn to build something wonderful using this superpower.

Let me know what you liked/disliked about the post down below. 👇

Top comments (7)

Johann Gonçalves Pereira • Mar 31 '22

Hey I read your article and love it, but I think I improve your approach. Take a look at this:

$media: (
    sm: 640px,
    md: 768px,
    lg: 1024px,
    xl: 1280px,
    2xl: 1536px,
    3xl: 1920px,
);

@mixin md($breakpoint) {
    @each $breakpoints, $size in $media {
        @if $breakpoint==$breakpoints {
            @media screen and (min-width: $size) {
                @content;
            }
        }
    }
}