How to Use Sass Mixins

Introduction

Sass is incredible. Whether using it as Sass or SCSS, it improves productivity and makes complex CSS tasks easy. Sass is easy to debug and lets us do more with CSS.

Today’s article is about Sass Mixins, it answers the question of What? Why? and How to use a Mixin?

If you are new to Sass, you check out this Getting Started with Sass.

What is a Mixin?

A Mixin is a block of code that lets us group CSS declarations we may reuse throughout our site.

Take, for example, displaying an HTML element as a Flex element.

.row {
    display: -webkit-flex;
    display: flex;
}

There are many elements we want displayed flex, and typing this declaration above over and over gets boring pretty fast. This is where Sass Mixins come in.

Creating a Mixin

Creating a Mixin is very simple, all we have to do is use @mixin command followed by a space and our Mixin name, then we open and close our curly brackets. Something like this.

@mixin flex {
    // write the css here
    display: -webkit-flex;
    display: flex;
}

Now we can add our flex declaration and use the Mixin anywhere in our code.

Use a Mixin

Now that we know how to declare Mixins, we can now learn how to use them in our SCSS code.

To use a Mixin, we simply use @include followed by the name of the Mixin and a semicolon.

.row {
    @include flex;
}

After compiling this SCSS code into CSS, our CSS file should look like this.

.row {
    display: -webkit-flex;
    display: flex;
}

Passing Arguments to Mixins

Mixins can also take in arguments to make the output more dynamic. For example, let’s assume we are building a grid system, and we can choose whether to use flexbox for our layout or floats.

We can create a Mixin, pass an argument to tell it to alternate between flex or floats.

To pass arguments to a Mixin, we simply do this.

@mixin grid($flex) {
    @if $flex {
        @include flex;
    } @else {
        display: block;
    }
}

Now, when we call the grid Mixin, we must pass a truthy argument to the Mixin. Just as you’d expect, pass an argument to an invoked Mixin like this.

@include grid(true);

To let a Mixin receive multiple arguments, we comma-separate the arguments like this.

@mixin grid($flex, $full-width) {
    // code goes in here
}

Default Mixin Arguments

Functions in programming languages (SASS included) allow default arguments, it only makes sense for mixins too.

The syntax for passing a default argument to a Mixin looks like this.

@mixin grid($flex: true) {
    // code here
}

We can pass as many variables as we want. But, any variable that has a default/optional argument needs to be at the end of the argument list.

Meaning, you can’t do this.

@mixin grid($flex: true, $max-width) {
    // code here
}

SCSS will throw an error that states Required argument $max-width must come before any optional arguments..

Variable Arguments

In CSS, we have properties like padding and margin that can take anywhere from one to four values for their property arguments.

Like this.

a {
    padding: 10px;
    padding: 10px 20px;
    padding: 10px 20px 50px;
    padding: 10px 20px 50px 20px;
}

As you know all values above are valid.

In SCSS we also have lists. The padding values above are treated as lists in SCSS. But there is a way for us to tell Mixins to treat these values as variables instead of a list.

To illustrate, let’s create a padding Mixin.

@mixin padding($values) {
    @each $var in $values {
        padding: #{$var};
    }
}

If we use this Mixin @include padding(2px 4px 6px); our result will be.

a {
    padding: 2px;
    padding: 4px;
    padding: 6px;
}

To treat this variable as a list, we add triple dots ... after the variable name like this.

@mixin padding($values...) {
    @each $var in $values {
        padding: #{$var};
    }
}

Now $values do not get treated as a list but rather a normal variable.

a {
    @include padding(2px 4px 6px);
}

Now we get this.

a {
    padding: 2px 4px 6px;
}

Variable Arguments (Continued)

Another function of the ... is that it is used to spread arguments.

Sounds weird, an example would better illustrate.

$style1: 100%, 70px, #fo6d06;
$style2: (background: #bada55, width: 100%, height: 100px);

@mixin box($width, $height, $background) {
    width: $width;
    height: $height;
    background-color: $background;
}

.fogdog {
    @include box($style1...);
}

.badass {
    @include box($style2...);
}

The first thing we did is define two variables $style1 and $style2, a list and map.

Then we define a box Mixin that takes 3 arguments. Then we call the Mixin twice, both times using the ... (spread operator) to pass a list as the only argument in the first instance, and in the second instance, we passed the map.

For the list, since we have 3 list items and the Mixin has 3 arguments, each argument is passed in respectively.

If the list has a length less than 3 it throws an error, otherwise, it takes only the first 3 list items. Meaning our list can be as 10 items and only the first 3 items will is passed to the list.

The map is also treated the same way as the list, the only exception is that the map is treated as keyword arguments (meaning the map key values have to match the variable name).

The above snippet compiles into this.

.fogdog {
    width: 100%;
    height: 70px;
    background-color: #fo6d06;
}

.badass {
    width: 100%;
    height: 100px;
    background-color: #bada55;
}

@content

@content allows for Mixin extension. We can pass a block to Mixins with the use of @content.

In short, @content makes this possible.

@include grid() {
    // css go here
}

To make allow Mixins to receive a block, we simply do this.

@mixin grid() {
    @content;
}

And now, our grid Mixin can take in extra CSS. An example use case of this is media queries. Take this snippet for example.

@mixin small() {
    @media only screen and (max-width: 320px) {
        @content;
    }
}

Instead of having to type the media query every time, this feels like a much more stable way to handle media queries.

@include small {
    // css code for small screens go here
}

This is just one example of @content in action, there are many open-source projects that use it, and I’m sure you have quite a few ideas of your own.

Conclusion

Mixins are obviously very useful and speed up your workflow, and there is a lot we can do with them.

Here is an example of popular open-source Mixins.

• Andy.scss is a collection of SCSS Mixins.
• SASS-MQ a sass Mixin for handling media queries.
• Bourbon a collection of CSS Mixins.
• Family.scss made by Lucas Bonomi or LukyVJ, this makes working with nth-child selectors manageable.
• Collection of Mixins by TheModernWeb

You can share your favorite Mixins in the comment.