title: Using mixins in bootstrap 3 to avoid unsemantic markup for layout structure
body: <p>I'm relatively new to both bootstrap and less and this is a test run. The goal is to take the bootstrap classes and turn them into simple and semantic classes using less. I keep getting error messages saying that .col-sm-12 and .col-md-8 are undefined. </p>
  
  <p>How do I do resolve this issue. </p>
  
  <pre><code>    /*less styles file*/
  
  @import "bootstrap.min.css";
  
  @boom: #ea7000;
  
  @screen-sm: ~"(min-width:768px)";
  @screen-md: ~"(min-width:992px)";
  @screen-lg: ~"(min-width:1200px)";
  
  .tim    {
      height: 200px;
          @media screen, @screen-sm   {
              background-color: black;
              .col-sm-12;
          }
          @media screen, @screen-md{
              background-color: @boom;
              .col-md-8;
          }
  }
  </code></pre>