Why Mixins are introduced

In your web application, you want to apply the some set of styles to different tags or blocks, for example, You have anchor links presented in navigation of header,Sidenav and content.

You want to apply the anchor styles of sidenav,content and header

// Normal anchor link
a.link{
  color:white;
}
//  already visite the link
a.visited{
  color:blue;
}
//  link when mouse over
a.hover{
  color:white;
}
// selected active link
a.active{
  color:green;
}

You have to copy above code to all places wherever anchor links are used. This will be same code is placed in multiple files.

To avoid this, Mixings are introduced and moved all repeated code into mixin’s declaration @include allows to include the styles written in @mixin block

Let explore more about mixin as follows

Mixin Directive basics

SASS mixins are one of the important feature for style reusability, These are set of styles grouped under one name with dynamic arguments.

Mixin rules in SASS involves two steps

  • Define mixin -@mixins keyword is rule is used to create a css styles
  • Using Mixin - @includes rules is being used to include the mixin styles in the current scope

Define mixin syntax

@mixin mixinname {
  css group of styles
}
@mixin mixinname(arguments){
  css group of styles
}
  • @mixin is keyword to define the reusuable css styles, followed by mixin-name
  • mixin-name is valid identifier for name of the mixin
  • arguments are optional
  • group of styles are enclosed in open and close braces

Using mixin in other places

Once mixins are created, @include directive is used to include the mixin in the current context.

Syntax

@include mixin-name
@include mixin-name(arguments)

@include is a keyword to call the mixin, Mixin-name is used followed by optional arguments

Here is an @mixin and @include usage example

@mixin anchorlinks($link,$visited,$hover,$active){
// Normal anchor link
a.link{
  color:$link;
}
//  already visite the link
a.visited{
  color:$visited;

}
//  link when mouse over
a.hover{
  color:$hover;
}
// selected active link
a.active{
  color:$active;
}
}

Generated CSS

nav a.link {
  color: red;
}
nav a.visited {
  color: green;
}
nav a.hover {
  color: blue;
}
nav a.active {
  color: white;
}

.leftside a.link {
  color: yellow;
}
.leftside a.visited {
  color: white;
}
.leftside a.hover {
  color: blue;
}
.leftside a.active {
  color: pink;
}

Arguments data type values As you see mixins are defined with arguments, The arguments are passed of values of different datatypes. if mixins is created with arguments, @include also called with arguments. Mixins also created without arguments and @include contains only mixin name title mixin is created without arguments, @include only contains title subtitle mixin is created with arguments, @include must call subtitle with arguments

‘@include subtitle();’ is called without arguments, compiliation failed with missing argument $colorvalue

@mixin title{
  font-size:10em;
  line-height:20em;
  color:block;
}

@mixin subtitle($colorvalue){
  font-size:7em;
  line-height:10em;
  color:$colorvalue;
}

.mainheader{
  @include title;
    padding:5px;
}

.subheader{
  @include subtitle(red);
    padding:2px;
}

Generated CSS code is

.mainheader {
  font-size: 10em;
  line-height: 20em;
  color: block;
  padding: 5px;
}

.subheader {
  font-size: 7em;
  line-height: 10em;
  color: red;
  padding: 2px;
}

Arguments with default values

As you see, when you called mixins, arguments must be passed, Otherwise gives compilation error like has no parameter named error.

sometimes, if some arguments are passed and assigned with default

Define mixins with variable or optional arguments

Like a javascript language, we can pass variable multiple arguments to the function

Mixin is defined with multiple arguments which are not fixed(2) but can pass any arguments

@mixin samplemixin(
  $disable: true,
  $width: auto,
  $args...
) {
  width:$width;
  disable:$disable;
}

You can use multiple arguments

.header-section{
  @include samplemixin(true,200px,green);
}

Difference between mixins and Functions

Mixin and functions are defined once and reused with by passing arguments.

Mixin  Function  
Mixins does not returns anythingfunctions returns value
Output is css ruleOutput is a single value
These can not be assigned to variablescan be assigned to variables

Let’s see examples for mixin and function

Example of mixin and function declaration and assignment to variables

@function myfunction($argument){
  @return $argument;
  
}
@mixin mymixin($argument){
margin: $argument;
}
.container{
  margin:myfunction(8px);
}
.container1{
  @include mymixin(8px);
}
$functionvariable:myfunction(3px); // This compiles fine
$mixinvariable: @include mymixin(3px); // This will not compiles

When mixin are not assigned to variables as mixins does not return.