SASS mixins

This tutorial covers mixins tutorials with examples in SASS..

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 preseneted 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 whereever anchor links are used. This will be same code is placed in multiple files.

To avoid this, Mixins are introduced and moved all repeated code into mixin delcaration @include allows to include the styles written in @mixin block

Let explore more about Mixinx 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 
```SCSS
@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 passeed, Otherwise gives compilation error.

sometimes, if some arguments are passed, assigned with default ### Define mixins with variable or optional arguments Like a javascript language,

Media queries with mixins

Difference between mixins and Functions rules


| Mixin | Function

| Mixins does not returns anything| functions returns value| | Output is css rule| Output is a single value| | These can not be assigned to variables| can be assigned to variables|

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.

Next