@include vs @extend in SASS

@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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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

Check out this Author's contributed articles.

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.