fbpx Skip to content

Aquent | DEV6

Managing Media Queries with Sass Mixins

Written by: Susan Wang

With the emergence of numerous displaying devices with all kinds of screen sizes and resolutions, it becomes more and more critical to make your web application look flawless across all the potential devices. Media queries are a good technique that makes this possible. Unfortunately, maintaining hundreds of them in your web application can be tedious and difficult.

In this blog, I show how to easily manage your media queries with Sass Mixins throughout your responsive web application.

Media query

Media query is a CSS3 technique  that uses @media to define a block of CSS code which is only applied when the condition is met.

A simple example is shown as follows:

@media (max-width: 600px) {
     Font-size: 16px;
}

In this case, the font-size defined inside the @media block is applied when the view point size is <= 600px. The 600px is usually called a breakpoint. To make the web application responsive, you probably have multiple breakpoints for different screen sizes and you have to write hundreds of media queries throughout your CSS files. It seems fine and brings not too much pain until you need to edit the rules for the actual breakpoints. Then if you need to change the definition of your breakpoints, you have to look into all the CSS code and change every place affected.

Mixins

Fortunately, with Sass Mixins you can have another way to centrally and uniformly manage your media queries. Specifically, you need to write your CSS code with Sass so that you can benefit from Mixin, which defines a block of code that you may reuse throughout your project.

Define your breakpoints

Say you want to setup the following breakpoints.

 0-600px Phone
 600-900px Tablet portrait
 900-1200px Tablet landscape
 1200px+ All the other devices

Then you write @mixin block for each breakpoint:

@mixin breakpoint-phone {
     @media (max-width: 600px) { @content };
}
@mixin breakpoint-tablet-port {
     @media (max-width: 900px) { @content };
}
@mixin breakpoint-tablet-land {
     @media (max-width: 1200px) { @content };
}

Inside of each @mixin block, you use @media rule to set up a template media query for each breakpoint. @content is a directive of Sass which allows you to insert the content later.

Using the mixin

For the above example, if you want to use the “breakpoint-phone” @mixin, you can use:

@include breakpoint-phone {
     Font-size: 50%;
}

Which is equivalent to:

@media (max-width: 600px) {
     Font-size: 50%;
}

However, as you can see, with the @mixin, we can now use @include breakpoint-phone {} anywhere inside our project to define the CSS rules for this specific breakpoint. Later on, when you need to update the rules for the phone devices, you can just edit the corresponding blocks, and you don’t have to remember the specific breakpoint since it has been defined in the @mixin block.

Getting Fancy/Parameterize your mixins

If you would like to further simplify the @mixin block, you can create just one @mixin block and pass a parameter to the @mixin block to indicate which breakpoint you are working on. For example:

@mixin breakpoint($breakpoint) {
    @if $breakpoint == phone {
         @media (max-width: 600px) { @content };
    }
    @if $breakpoint == tablet-port {
         @media (max-width: 600px) { @content };
    }
    @if $breakpoint == tablet-land {
         @media (max-width: 600px) { @content };
    }
}

Then when using it, you write:

@include breakpoint(phone) {
     Font-size: 50%;
}

It’s not easy to make your web application look pixel-perfect across all devices. With the help of Sass Mixins, you relieve the pain of writing media queries with breakpoints throughout the project. Instead, you only need to define all the breakpoints in one place!