Responsive web design is one of the most challenging part for the web devs. As the world is accelerating in creating new gadgets, there are tons of various devices with different shapes. It has become hectic job for the web devs to adjust the size of the website in each and every of the device.

via GIPHY

To make the website design adjustable the media query was introduced which was the starting age for responsive web design. The media query is very much helpfull for adjusting the web layouts for any type of devices. To be able to use the media query we first need to declare a meta tag which defines the viewort.

<meta content="width=device-width, initial-scale=1" name="viewport" />

Note : Remember that if you forgot to keep the viewport meta tag than media query will not work.

The media query syntax

Media query has a simple syntax which is easily understandable by even a starter.

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

The above css shows a simple implementation of the media query. The css will effect the body tag only for the devices having width 600px or less.

If we use direct css we would either declare media query line for every place where we need to change the stylings or either we declare the media query and place all css inside it. This is the most common method of writing the responsive css. But it will only please you untill your css gets very large.

How to structure media queries in Sass | Creative Bloq
SASS

Entry of SASS

SASS is css preprocessor with a super powers. You can learn more about the sass but here we will just use it to ease our media query implementation. To do this we will use the mixins feature of the SASS.

Mixins are like a function but in css. We can declare a mixin with a name and which can take parameters. The mixin feature can be utlised in the responsive design so that we dont need to write “media query” everywhere.

Lets create the mixins, but first we should declare a variables for specifing the width size.

$xsm: 374px; // For extra small
$sm: 576px; // For small
$md: 768px; // For medium
$lg: 992px; // For large
$xl: 1200px; // For extra larger
$xxl: 1400px; // For larger

Oh I forgot to mention and dont be confused. The $ specified a variable in the SASS as I told earlier SASS has superpowers. Above we declared some of the screen width sizes. We will use them as breakpoints.

Basically those above mentioned breakpoint will do the magic for your responsive works. But if you want you can easily use the SASS super power and define your own breakpoint. Now lets create the mixin.

The mixins

//For Extra Small
@mixin <mixin_name> {
  @media screen and (max-width: ($<brakpoint_width>)) {
    @content;
  }
}

The mixin is declared by wiriting @mixin followed by your desired name for mixin. And inside it we will write the media query. There we will use the breakpoint variable. You can also directly specifiy the width and skip creating a variable for breakpoint. The innermost @content will return everything inside of the media query.

//For Extra Small
@mixin xsm {
  @media screen and (max-width: ($xsm)) {
    @content;
  }
}

//For Small
@mixin sm {
  @media screen and (max-width: ($sm)) {
    @content;
  }
}

//For Medium
@mixin md {
  @media screen and (max-width: ($md)) {
    @content;
  }
}

//For large
@mixin lg {
  @media screen and (max-width: ($lg)) {
    @content;
  }
}

//For Extra Large
@mixin xl {
  @media screen and (max-width: ($xl)) {
    @content;
  }
}

//For Extra Extra Large
@mixin xxl {
  @media screen and (max-width: ($xxl)) {
    @content;
  }
}

Above is the mixins for all the breakpoints. Now lets see implmentation and compare it with simple css one.

 
//Before SASS

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

//After SASS

body {
  @include md{     
    background-color: lightblue;
  }
}


We use @include <mixin_name> to use the declared mixins. Above we can see that after the SASS is implemented the code is now short and easily understandable. But hey dont get astonished as on the inner level SASS will create all the media query for you.

Now in your responsive design work you can simply use mixin where you like with a short css mixin. Just include the mixin and inside its scope give the css you want for that screen.

Mobile first and Desktop first

I wanna let you know that above example is for a desktop first method. If you want to create a mobile first website than you need to use min-width in the media query and the mixins creation time.

Also make a note of it that if you are doing desktop first than you need to declare the mixin and use it in a descending order of the breakpoint and vice versa for the mobile first design.

And finally, happy SASSing. 😁