Sass Mixins

Sass Mixins facilitates you to make groups of CSS declarations that you want to reuse repeatedly on your site. You can even pass the value according to your need to make the mixin more flexible.

The mixin can store multiple values or parameters and call function to avoid writing repetitive codes. Mixin names can use underscores and hyphens interchangeably.

Let's take an example for border-radius. This example specifies how to use mixin in border-radius to use it repeatedly in your website.

SCSS Syntax:

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}
.box { @include border-radius(10px); } 

Equivalent Sass Syntax:

=border-radius($radius)
  -webkit-border-radius: $radius
  -moz-border-radius:    $radius
  -ms-border-radius:     $radius
  border-radius:         $radius
.box
  +border-radius(10px) 

Here, we use the mixin directive and give it a name border-radius. A variable $radius is used inside the parentheses to pass a radius according to or need. After creating the mixin you can use it as a CSS declaration. It starts with @include followed by the name of the mixin. The generated CSS will look like this:

CSS Syntax:

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
} 

Directives present in Mixin

A list of directives present in Mixin:

Index	Directive	Description
1.	Defining a mixin	The @mixin directive is used to define the mixin.
2.	Including a mixin	The @include directive is used to include the mixins in the document.
3.	Arguments	Argments are the SassScript values that can be taken in mixins at the time when mixin is included and available as variable .
4.	Passing content blocks to a mixin	It specifies block of styles passed to the mixin.