html

@mixin and @include in Sass | Explained

Syntactically Awesome Stylesheet (Sass) is popular for facilitating its users to write DRY (Don’t Repeat Yourself) CSS code which is clean, more readable, and reusable. This way Sass increases the potentiality of the basic CSS language. One such way to write a reusable CSS code using Sass is through the creation of a mixin by @mixin rule and including this mixin using the @include rule. To know more about these rules follow the article below.

Sass @mixin and @include rules

The @mixin rule in Sass lets you create a reusable CSS code. This reusable code consists of styles that are redundant, therefore, these are grouped together so that these can be used anywhere in the code where required. This piece of code is called a mixin. For the purpose of using a mixin in your code, Sass provides the @include rule.

Here we will guide you regarding how to create and use a mixin.

How to define a Mixin

For the purpose of defining a mixin, use the @mixin directive and group your redundant and reusable CSS styles together.

Syntax of @mixin rule

@mixin mixin-name {
  property: value;
  property: value;
}

After using the @mixin directive you have to name that particular mixin and then write CSS properties in that block and a mixin will be successfully created. Here is an example of a mixin.

@mixin header {
  background-color: green;
  font-size: 30px;
  font-weight: bold;
}

Voila, a mixin for a header has been created! Now every time you need to style your header you do not need to write those properties, again and again, simply use the above mixin and you are good to go. But how to use this mixin? Well, as mentioned above using the @include rule a mixin can be used.

Syntax of @include rule

selector {
  @include mixin-name;
}

This way you can include a mixin in your code where required. For instance, let’s include the header mixin that we created above.

.header{
  @include header;
}

When the Sass file is transpiled, the above code will give the following resultant CSS output file.

.header{
  background-color: green;
  font-size: 30px;
  font-weight: bold;
}

Another advantage of this @include rule is that you can include multiple mixins together. For instance, below we have included three mixins in another mixin.

@mixin mixin1{
  @include mixin2;
  @include mixin3;
  @include mixin4;
}

This way you can use multiple mixins together.

Until now we have learned about mixins without passing arguments. In the next section, we will see how you can pass arguments to a mixin.

How to pass arguments to a mixin

Passing arguments to mixin proves useful when you want to group a similar set of CSS properties together, however, the values passed to those properties might differ. Here is how you can define a mixin by passing an argument.

@mixin border($color, $width) {
  border: $width dotted $color;
}

.container {
  @include border(pink, 2px);
}

.box {
  @include border(purple, 3px);
}

In the above code snippet, we have created a mixin by the name border and passed it two arguments. When using this mixin while styling other elements we have used the @include rule, meanwhile, the values passed to the border mixin differ in each case. Here the arguments passed are set as variables.

Another thing that you can do with mixins is you can assign default values to the arguments passed to the mixins.

@mixin border($width: 2px, $color: pink){
  border: $width dotted $color;
}

If you desire to keep the default values then it is up to you, however, if you wish to change a particular value then here is how it will be done.

.container{
 @include border($width: 3px);
}

The color applied to the border of the selector will be the same as defined in the default value.

Conclusion

The @mixin rule in Sass lets you create a reusable CSS code called a mixin, in which you can group redundant CSS properties and values that can be used anywhere in your code when required. Meanwhile, the @include rule is used to add a mixin in your code. You can also pass arguments to a mixin when you want to group a similar set of CSS properties together having different values. This and much more about the @mixin and @include rule has been compiled in this article for you.

About the author

Naima Aftab

I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.