title: Use SASS mixin or create separate class is better?
body: <p>In our project we use SASS for styles development. Also, we use Bootstrap and it contains next well-known mixin:</p>
  
  <pre><code>@mixin clearfix {
      *zoom: 1;
      &amp;:before,
      &amp;:after {
          display: table;
          content: "";
          // Fixes Opera/contenteditable bug:
          // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
          line-height: 0;
      }
      &amp;:after {
          clear: both;
      }
  }
  </code></pre>
  
  <p>And we use it in our styles:</p>
  
  <pre><code>.class-example {
     @include clearfix();
     . . .
  }
  </code></pre>
  
  <p>After the compilation into CSS, SASS copies all content of mixin into each class we used mixin. So, it's a big amount of duplicated code. We use mixin about 100 times, so it's about 1000 extra lines in css.</p>
  
  <p><strong>So, the question:</strong> which is better form performance/support/readability/etc. point of view</p>
  
  <ol>
  <li>Use mixin and allow duplicated code be</li>
  <li>Create class <code>.clearfix</code> and use it in markup like <code>&lt;span
      class="example-class clearfix"&gt; ... &lt;/span&gt;</code> to avoid duplication</li>
  </ol>
  
  <p>Also, if someone has better solution - I'll be glad to get it. Any comments/discussions are welcome.</p>