title: In Sass, what's the difference between the @mixin and @extend directives?
body: <p>I just finished with the Sass <a href="http://sass-lang.com/guide" rel="nofollow noreferrer">guide</a>.
  The guide explains mixins:</p>
  <blockquote>
  <p>..A mixin lets you make groups of CSS declarations that you want to
  reuse throughout your site. You can even pass in values to make your
  mixin more flexible.</p>
  </blockquote>
  <p>and extend:</p>
  <blockquote>
  <p>.. This is one of the most useful features of Sass. Using @extend lets
  you share a set of CSS properties from one selector to another ..</p>
  </blockquote>
  <p>It looks like 'extend' may be implemented in 'mixin' (it seems 'mixin' is extend of 'extend' :-) ).</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>// @extend
  .message {
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
  }
  
  .success {
    @extend .message;
    border-color: green;
  }
  
  .error {
    @extend .message;
    border-color: red;
  }
  
  .warning {
    @extend .message;
    border-color: yellow;
  }
  
  // @mixin
  @mixin message($color) {
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
    border-color: $color;
  }
  
  .success { @include message(green); }
  
  .error { @include message(red); }
  
  .warning { @include message(yellow); }</code></pre>
  </div>
  </div>
  </p>
  <p>and even more because mixins have params.
  But on the other hand the processed CSS is not exactly the same. But it will be same style effect on the DOM.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* extend processed */
  .message, .success, .error, .warning {
    border: 1px solid #ccc;
    padding: 10px;
    color: #333; }
  
  .success {
    border-color: green; }
  
  .error {
    border-color: red; }
  
  .warning {
    border-color: yellow; }
  
  /* mixin processed */
  
  .success {
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
    border-color: green; }
  
  .error {
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
    border-color: red; }
  
  .warning {
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
    border-color: yellow; }</code></pre>
  </div>
  </div>
  </p>
  <p>My question is how do these features differ?
  When should I use one over the other?</p>