Open In App

SASS | @mixin and @include

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

Mixins can be used to group styles that can be assigned different values and can be used multiple times like function. We can also pass arguments in mixin like function, which allows us to write reusable code.

Mixins are defined using @mixin at-rule and it can be used in the current context using @include at-rule.

Mixins can be used in two ways: Without Arguments and With Arguments.

  1. Without Arguments: This type of mixin can be used, when we do not need to change the values of the properties i.e., we want to use a group of properties again and again with the same values of properties.

    Syntax:

    • To define mixin: @mixin name_of_mixin {…}
    • To use mixin in the current block: @include name_of_mixin; .
    @mixin block-name{
        property-1: value;
        property-2: value;
            ...
        property-n: value;
    }
    
    block-name2{
        @include block-name;
    }
            

    SCSS file:

    @mixin first-mixin {
        width: 100%;
        overflow: hidden;
        color: gray;
    }
                
    @mixin second-mixin {
        @include first-mixin;
                
        ul {
            list-style-type: none;
        }
                
        li {
            display: inline-block;
            width: 100px;
            padding: 5px 10px;
        }
                
        li a {
            text-decoration: none;
        }
                
    }
                
    navigationbar {
        @include second-mixin;
    }
            

    Compiled CSS file:

    navigationbar {
        width: 100%;
        overflow: hidden;
        color: gray;
    }
    
    navigationbar ul {
        list-style-type: none;
    }
    
    navigationbar li {
        display: inline-block;
        width: 100px;
        padding: 5px 10px;
    }
    
    navigationbar li a {
        text-decoration: none;
    }
                  
            
  2. With Arguments:This type of mixin can be used, when we want to use a group of properties again and again with the different values and we can pass the different values using arguments like function. Here the concept of the default value of argument is same as any other programming language.

    Syntax:

    • To define mixin: @mixin name_of_mixin (arguments…) {…}
    • To use mixin in the current block: @include name_of_mixin (arguments…);
    // Here default values are optional
    
    @mixin block-name($parameter1, $parameter2: default, ...) {
                    
        property-1: $parameter1;
        property-2: $parameter2;
        // You can use all the parameters 
        // same as variables
    }
    
    block-name2 {
        @include block-name($argument1, $argument2, ...);
    }
            

    SASS file:

     // Here blue is default value of $three
    
    @mixin first-mixin($one, $two, $three: blue) {
        width: $one;
        overflow: $two;
        color: $three;
    }
    
    @mixin second-mixin($one, $two, $three, $four) {
        // Don't need to pass the third argument if 
            // the default value is same as your argument.
        @include first-mixin($one, $two /*, Default*/);
    
        ul {
            list-style-type: none;
        }
    
        li {
            display: inline-block;
            width: $four;
            padding: 5px 10px;
        }
    
        li a {
            text-decoration: none;
        }
    
    }
    
    navigationbar {
        @include second-mixin(100%, hidden, blue, 100px);
    }
            

    Compiled CSS file:

    navigationbar {
      width: 100%;
      overflow: hidden;
      color: blue;
    }
    
    navigationbar ul {
      list-style-type: none;
    }
    
    navigationbar li {
      display: inline-block;
      width: 100px;
      padding: 5px 10px;
    }
    
    navigationbar li a {
      text-decoration: none;
    }
    
            

Last Updated : 11 Oct, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads