SASS | @mixin and @include

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;
    }
    
            


My Personal Notes arrow_drop_up

I am doing BTech at Dhirubhai Ambani Institute of Information and Communication Technology

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.