@include vs @extend in SASS

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

%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.
Picked
SASS
Technical Scripter 2019
CSS
Technical Scripter
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.