title: Bootstrap & LESS: importing mixins only as reference
body: <p>I am using Bootstrap 3.0 &amp; LESS 1.5. I'll be using the same bootstrap.css for many sites (or use their CDN). So I am using</p>
  
  <pre><code>@import (reference) "bootstrap-3.0.0/less/bootstrap.less";
  @import (reference) "bootstrap-3.0.0/less/mixins.less";
  </code></pre>
  
  <p>to import only as reference.</p>
  
  <p>My app.less has (among otherthings)</p>
  
  <pre><code>.herocontainer{
      .make-row();
      .iphoneblock{
          .make-sm-column-offset(1);
          .make-sm-column(4);
          text-align: center;
      }
      .copyblock{
          .make-sm-column(5);
          text-align: center;
          .copytext{
              @media(min-width: @screen-sm) {
                padding-top: 100px;
                }
          }
          .buybutton{
              .btn-lg;
              .btn-primary;
              background-color: #d6822f;
              }
      }
  }
  </code></pre>
  
  <p>The resulting site is just single column output. But if I remove (reference) from the mixins, like:</p>
  
  <pre><code>@import (reference) "bootstrap-3.0.0/less/mixins.less";
  </code></pre>
  
  <p>then I get a two column responsive output, but the resulting css also has classes that I don't need.</p>
  
  <p>So,
  a) how do I get classes in css only for the ones that I write in app.less and not bloated with bootstrap classes
  b) how do I go about debugging such css issues? (I do use Google chrome tools but this issue is more than I can understand/debug)</p>
  
  <p>Thank you,<br>
  Joseph</p>