DEV Community

Cover image for Easy to Write Media Queries using SASS Mixins
Tulsi Prasad
Tulsi Prasad

Posted on • Updated on

Easy to Write Media Queries using SASS Mixins

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.

https://camo.githubusercontent.com/c5a4f32de41e04aba6b74c2df384c3934c5e19bf/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f3232323036342f313034363936342f63326265363833652d313035312d313165332d393563302d6634303164653039636262662e6a7067

đź‘€ 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

https://media.giphy.com/media/yYSSBtDgbbRzq/giphy.gif

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;
        }
      }
    }
Enter fullscreen mode Exit fullscreen mode

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   
        }
    }
Enter fullscreen mode Exit fullscreen mode

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;
        }
    }
Enter fullscreen mode Exit fullscreen mode

🙇‍♂️ 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)

Collapse
 
johanngoncalvespereira profile image
Johann Gonçalves Pereira

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;
            }
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

I think is more elegant.

Collapse
 
makampos profile image
Matheus de Campos

Maybe you can write something more complex in the future posts?
I glad to see more about Sass.
Thanks bro!

Collapse
 
thebuildguy profile image
Tulsi Prasad

Yeah. I'll post as soon as anything sparkly comes up. ✨

Collapse
 
makampos profile image
Matheus de Campos

I appreciate! thank you

Collapse
 
fabiosantosrj profile image
Fabio Santos

very good.

Collapse
 
fleshmecha profile image
〄

Did you mean to tag this with "sass"? You wrote "saas".

Collapse
 
thebuildguy profile image
Tulsi Prasad

Ohh, so many thanks for figuring this out. That was a typo, from my side. Thanks!