Skip to content
Related Articles

Related Articles

@include vs @extend in SASS
  • Difficulty Level : Medium
  • Last Updated : 22 Jan, 2020

@include keyword is used to include the code written in a mixin block. @mixin is used to group css code that has to be reused a no of times. Whereas the @extend is used in SASS to inherit(share) the properties from another css selector. @extend is most useful when the elements are almost same or identical.
The main difference between the two is in their compiled CSS file.

  • @include example
    SCSS file:




    @mixin text {
      color: black;
      font-size: 30px;
      font-weight: bold;
    }
    .hello{
      @include text; 
    }
    .world{
      @include text;
    }

    
    

    Mixin duplicates the styles over all classes in the CSS.
    Compiles CSS file:

    .hello{
      color: black;
      font-size: 30px;
      font-weight: bold;
    }
    .world{
      color: black;
      font-size: 30px;
      font-weight: bold;
    }
    

    Mixin can also accept parameters if required, whereas this is not possible with extend.
    for more details of @mixin visit here

  • @extend example:
    Here in this example, the two buttons will share the general properties for a button but they differ in background color only so using extend in cases like these where the elements are almost the same and only differ some properties using @extend is a good idea.
    SCSS file:




    %button-format {
        padding: 10px 20px;
        border-radius: 15px;
        color: black;
    }
      
    .toolbar-button {
        @extend %button-format;
        background-color: lightpink;
      
        &:hover {
            background-color: rgb(155, 106, 114);
        }
    }
      
    .status-bar-button {
        @extend %button-format;
        background-color: lightblue;
      
        &:hover {
            background-color: blue;
        }
    }

    
    

    compiled CSS file:

    .status-bar-button, .toolbar-button {
      padding: 10px 20px;
      border-radius: 15px;
      color: black;
    }
    
    .toolbar-button {
      background-color: lightpink;
    }
    .toolbar-button:hover {
      background-color: #9b6a72;
    }
    
    .status-bar-button {
      background-color: lightblue;
    }
    .status-bar-button:hover {
      background-color: blue;
    }
    

Conclusion:
SASS is a fantastic style sheet language and its both features @include and @extend both have pros and cons despite this, if used in the exact situation these can prove to be the best tools of SASS.




My Personal Notes arrow_drop_up
Recommended Articles
Page :