As we start to build websites with mobile first in mind, our stylesheets can get messy really quick. In this article, we’ll talk about making your stylesheets more functional and easier to read at the same time. We will take a quick peek into SASS, and the benefits that it will have over your stylesheets. The focus will be about a common problem that I typically see regarding media queries. At the end of this article I hope that you have a better understanding about making your stylesheets easier to read using SASS.

Let’s take a look at some common code:

@media screen and (max-width: 450) { #item { font-size: 10; … }
@media screen and (max-width: 550) { #item { font-size: 15; … }
@media screen and (max-width: 650) { #item { font-size: 20; … }
..
..

The above example is a bunch of media queries for different breakpoints. In case you are just getting into responsive styling, a breakpoint is where the page is going to break into a ‘new’ page. For instance, on a device with the max-width: 550 you might want your base font to be 20, when on a bigger device with max-width: 800 you might want your font set at 30 in size. That way when your page loads on different screen sizes your fonts will look accurate.

The problem with listing all of your breakpoints is it can become very repetitive and extremely hard to read quickly. Personally I have seen many stylesheets like this making it hard to read. The common approach that we will go over is to use SASS as your CSS preprocessor in order to simplify your stylesheets’ media queries.

In case you did not know, SASS is an extension language for CSS that makes writing it clean and easy. SASS can be used for many aspects of your stylesheet. For instance, it can store variables and hold conditional statements. Using SASS, we can rewrite the media queries to improve readability and flexibility.

A mixin is a simple part of SASS that we will use to take care of generating the media queries for us. Let’s dive into what your media queries might look like after utilizing a custom SASS mixin:

>@import ‘mixin-name-here’;
#item {
     @include auto-media(‘font-size’, ( 450px : 10px, 550px : 15px, 650px : 20px ));
}

As you can see, the above code is much cleaner to write and read. The @import includes another stylesheet that is holding the magic of the auto-media. In order to use our custom mixin named auto-media, we simply use @include in order to make a call to the function. So now nothing is stopping you from writing cleaner stylesheets.

That looks great but how is that mixin thing working? A simple mixin to the above example would look something like this:

@mixin auto-media($element, $sizes) {
     @each $size, $adj in $sizes {
          @media screen and (max-width: $size) {
               #{$element}: #{$adj};
          }
     }
}

The above code might not be the perfect mixin for your production code, but it should get you started. We start off with a @mixin that states we are going to make a function block, and then just like any method or function, you have parameters ($element,$sizes). As you remember from above, the $element is just a string, and then the sizes are a map. The sizes are easily broken down into their key value pairs with @each. We then print out the corresponding media sizes and a reference to the variables. More information about control directives and expressions on the SASS Reference Page.

SASS can do so much more than what was listed in this article. If you are not already using SASS, hopefully you will start. If you are using SASS, I hope you now understand the importance of drying out your stylesheets. The times of bloated stylesheets are now over.