SASS - Mixins

Why Mixins are introduced

In your web application, you want to apply the same set of styles to different tags or blocks, for example, You have anchor links presented in the 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 the above code to all places wherever anchor links are used. It is the same code placed in multiple files.

To avoid this, Mixin introduced, and moved all repeated code into mixin declaration.

@include allows to include the styles written with the @mixin block

Let’s explore more about mixin as follows.

Mixin Directive basics

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

Mixin rules in SASS involve two steps

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

mixin Declaration syntax

// mixin with empty arguments
@mixin mixinname {
  css group of styles
}
// mixin with  arguments
@mixin mixinname(arguments){
  css group of styles
}

• @mixin is the keyword to define the reusable CSS styles, followed by mixin-name
• mixin-name is a valid identifier for the name of the mixin.
• arguments are optional.
• a group of styles enclosed in open and closed braces

Using mixin in other places

Once mixins are created, the @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 are created with arguments, @include is also called with arguments.

Mixins are 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, compilation 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 errors 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 as 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 bypassing arguments.

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 is not assigned to variables as mixins do not return.