How to Write Media Queries with SASS Mixins

When building websites and apps, we’ll often use media queries to help ensure our layouts’ are responsive. This way, they can adapt to suit the multitudes of devices accessing them, as we need to ensure all of our users are catered for when engaging with our products.

CSS Media Queries

If you have experience with CSS, you’ll likely know that a media query is a CSS3 module that allows content to render and adapt to conditions. Such as screen resolution, for example:

@media (max-width: 599px) {
 font-size: 1rem;
}

Here, we’ve set the font size to 1rem when the viewport size is <= 599px.

This is simple enough, and of course, we’ll need multiple media queries to have a fully responsive site.

However, inevitably, the time will come when we’ll need to edit the rules for the actual breakpoints, and searching through all of your code to change every line affected by a rule change is far from ideal. There has to be a better way!

Modern layout specifications have improved greatly over the past few years, Grid and Flexbox are responsive by default. This helps us to cut down on the amount of media queries required in our projects & makes for cleaner code.

However, media queries still have a place in modern web development. And as our projects grow bigger, we need a better way of managing them.

Enter SASS mixins!

Mixins

As we know (see mixins), SASS mixins give us the ability to create reusable chunks of code — they reduce repetition, promote dry code and allow for ease of maintenance.

So writing media queries as mixins to inject into your stylesheets, wherever they’re required makes a whole lot of sense!

Let’s now look at an example.

Setting Up Your Mixins

@mixin for-phone-only {
  @media (max-width: 599px) { @content; }
}
@mixin for-tablet-portrait-up {
  @media (min-width: 600px) { @content; }
}
@mixin for-tablet-landscape-up {
  @media (min-width: 900px) { @content; }
}
@mixin for-desktop-up {
  @media (min-width: 1200px) { @content; }
}
@mixin for-big-desktop-up {
  @media (min-width: 1800px) { @content; }
}

Here, I’ve written up 5 common breakpoints into @mixin blocks.

The @content syntax is a directive of SASS that allows for the insertion of content later on, as you likely won’t be writing all of your queries at once.

Using a Mixin

Say we want to use a mixin to reduce the font size of our header text on mobile devices.

We add the mixin (nested under the appropriate class) as an include, like so:

.header-title {  
   font-size: 2rem;  

   @include for-phone-only {    
      font-size: 1rem; 
   }
}

When we compile our project, our @include will translate into:

@media (max-width: 599px) {
   font-size: 1rem;
}

We now have the ability to easily insert our media queries wherever we like throughout our projects!

Additionally, we won’t need to memorize our breakpoints, as we have them pre-defined. If we need to alter them, we can simply edit the mixins.

Another Way to Setup Our Mixins

If you want to take it a step further, you could use conditionals to set up your mixins.

You create just one @mixin block and set the parameters to be passed in — which we use to select our breakpoints, like so:

@mixin for-size($size) {
  @if $size == phone-only {
    @media (max-width: 599px) { @content; }
  } @else if $size == tablet-portrait-up {
    @media (min-width: 600px) { @content; }
  } @else if $size == tablet-landscape-up {
    @media (min-width: 900px) { @content; }
  } @else if $size == desktop-up {
    @media (min-width: 1200px) { @content; }
  } @else if $size == big-desktop-up {
    @media (min-width: 1800px) { @content; }
  }
}

Then, to use our mixins in this manner, we’d select it like so:

.header-title {  
   font-size: 2rem;  

   @include for-size(phone-only) {    
      font-size: 1rem; 
   }
}

It’s that simple!

Writing media queries doesn’t need to be a headache, and by using SASS mixins, we have one centralized location in which to manage our media queries.

Conclusion

If you liked this blog post, follow me on Twitter where I post daily about Tech related things!

🌎 Let's Connect

• Portfolio

• Twitter

• LinkedIn

• Hashnode

• Devto

• Medium

• Github

• Codepen