SASS: @mixins and @include

SASS Mixins are functions used to define styles that can be re-used throughout your stylesheet thereby allowing you to write reusable styling rules.

Write once, use again and again.

These are just the same as the functions that we use in other programming languages such as C, C++, JavaScript, etc. You need to write these mixins with some style rules in it and then you can reuse it anywhere in the rest of the stylesheet any number of times. You can create mixins using the @mixin at-rule.

Syntax of @mixin at-rule

Following is the syntax for defining a SASS mixin using the @mixin at-rule:

@mixin <name> { 
    // styling rules
} 

// or 

@mixin name(<arguments...>) { 
    // styling rules
}

SASS mixin can have any name and you can include any valid styling statement in it, just like a function definition. SASS mixins also take arguments, we will cover about SASS mixin arguments later in this tutorial.

Using a Mixin with @include at-rule:

To use a mixin defined using the @mixin at-rule, we use the @include at-rule. Following is the syntax of using the @include at-rule for using a pre-defined SASS mixin:

@include <name> 

// or 

@include <name>(<arguments...>)

where the name is the name of the mixin and arguments specify the arguments that a mixin accepts.

Let's take a simple example and understand the usage of both @mixin and @include at-rule in SASS. Below we have a SASS code, where we have defined a mixin basic-list, and another mixin inline-list. And we have used the @include at-rule to call the predefined mixins wherever required.

// defining a mixin
@mixin basic-list
  margin: 0
  padding: 0
  list-style: none

// using a mixin inside another mixin
@mixin inline-list
  @include basic-list

  li
    display: inline-block
    margin:
      left: -2px
      right: 2em

// calling a mixin in simple style rule
nav ul
  @include inline-list

The above SASS code will be transpiled into the following CSS code:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav ul li {
  display: inline-block;
  margin-left: -2px;
  margin-right: 2em;
}

NOTE: In SASS mixins, - (hyphen) and _ (underscore) are treated as same, which means basic-list and basic_list both can be used to call the basic-list mixin.

SASS Mixins with Arguments

SASS mixin supports arguments so that you can use them with different values to customize the style rule when you call any mixin. Let's take an example to define and use a mixin with some arguments.

@mixin customtextstyle($color, $size)
  color: $color
  font-size: $size
  font-weight: 400


.sidebar
  @include customtextstyle(#999999, 16px)

This will be compiled into the following CSS code:

.sidebar {
  color: #999999;
  font-size: 16px;
  font-weight: 400
}

SASS Mixin - Default Value for Arguments

We can provide default values to the arguments while defining a mixin so that even if the user doesn't provide a value for the argument, the default values are used. Let's modify the above SASS code to provide default values to the arguments used in customtextstyle mixin.

@mixin customtextstyle($color, $size:12px)
  color: $color
  font-size: $size
  font-weight: 400


.left-sidebar
  @include customtextstyle(#999999, 16px)

.right-sidebar
  @include customtextstyle(blue)

The above SASS code will be compiled into the following CSS code:

.left-sidebar {
  color: #999999;
  font-size: 16px;
  font-weight: 400
}

.right-sidebar {
  color: blue;
  font-size: 12px;
  font-weight: 400
}

As you can see in the above CSS code, in the CSS class .right-sidebar, the font-size property has taken the default value(12px) which we provided while defining the mixin.

SASS Mixin - Keyword Arguments

While calling SASS mixin, we generally provide the arguments in the same order in which they were declared when mixin is defined. But we can also pass the argument values by name while calling the mixin. Let's take a simple example and see this in action.

Here is our SASS code,

@mixin customtextstyle($color, $size : 12px)
  color: $color
  font-size: $size
  font-weight: 400

// calling mixin by providing argument with name
.sidebar
  @include customtextstyle(#999999, $size : 16px)

It will be compiled into CSS just like in the first example. The only difference here is that while calling the mixin, we have provided the value for the argument along with the name, this makes the code more readable.

NOTE: The name should be the same as defined in the mixin definition. So be careful, while updating the mixin, if you change the name of the argument, it may break your code.

SASS Mixin - Arbitrary Arguments

SASS mixin also supports arbitrary arguments which means a mixin can take any number of arguments when its called. If the last argument in a mixin declaration ends in ...(three dots), then all the extra arguments passed when the mixin is called are passed in the last argument as a list.

Let's take an example to understand this. (In this example, we will be using the @for at-rule to loop on the list of values)

@mixin custom-input($height, $selectors...)
  @for $i from 0 to length($selectors)
    #{nth($selectors, $i + 1)}
      padding: 10px
      height: $height
      // generating different border-radius for all
      border-radius: i*5px


@include custom-input(10px, "input.name", "input.address", "input.zip")

The above code is compiled into the following CSS code:

input.name {
  padding: 10px;
  height: 10px;
  border-radius: 5px;
}

input.address {
  padding: 10px;
  height: 10px;
  border-radius: 10px;
}

input.zip {
  padding: 10px;
  height: 10px;
  border-radius: 15px;
}

SASS @mixin and @include Example:

Suppose you want to provide some shadow to a div element using the box-shadow property, then we can write the CSS as shown below. Four lines of CSS code with 16 variables to set, this can become very boring to add in multiple div elements with different specifications for the shadow effect. Well, SASS mixins are just the right candidate to save you from such redundant and boring work.

div
{
	-webkit-box-shadow: 0px 0px 4px #fff;
	-moz-box-shadow: 0px 0px 4px #fff;
	-ms-box-shadow: 0px 0px 4px #fff;
	box-shadow: 0px 0px 4px #fff;
}

For the above CSS, you can write the mixins as given below:

@mixin box-shadow($x, $y, $blur_value, $color)
{
	-webkit-box-shadow: $x, $y, $blur_value, $color;
	-moz-box-shadow: $x, $y, $blur_value, $color;
	-ms-box-shadow: $x, $y, $blur_value, $color;
	box-shadow: $x, $y, $blur_value, $color;
}

Now this mixin will act as a function with its name as box-shadow and all we have to do is call it by providing 4 values for the shadow effect. To use these mixins anywhere in the stylesheet we use the keyword @include followed by the name of the mixin. Now suppose we use the mixin created above in our stylesheet, it will look as:

div 
{
    @include box-shadow(0px, 0px, 4px, #fff);
}

Note that in the above example we are passing the parameters in the mixins, just like we do in functions in other programming languages.

So in this tutorial, we learned all about SASS mixins and how to call them in our CSS wherever we want. Using SASS mixins helps us keep our CSS code clean and write reusable styling rules.