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

css

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

css

%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.

@include vs @extend in SASS

Explore