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

  
  

  
  
  

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