title: Mixing in Less CSS
body: <p>I'm still new at using Less CSS and I couldn't find a solution to my problem.
  I want a more efficient output result.</p>
  
  <p>I have this code in less : </p>
  
  <pre><code>.btn-trans {
        color: inherit;
        background-color: transparent;
        transition: all .4s;
  
        &amp;.btn-default {
          color: @trans-default;
          &amp;:hover {
            color: @trans-hover-color;
          }
        }
  
        &amp;.btn-primary {
          color: @trans-primary;
          &amp;:hover {
            color: @trans-hover-color;
          }
       }
    }
  </code></pre>
  
  <p>And this is the css output : </p>
  
  <pre><code>.btn-trans {
    color: inherit;
    background-color: transparent;
    transition: all .4s;
  }
  
  .btn-trans.btn-default {
    color: #bdbdbd;
  }
  
  .btn-trans.btn-default:hover {
    color: #f5f5f5;
  }
  
  .btn-trans.btn-primary {
    color: #738ffe;
  }
  
  .btn-trans.btn-primary:hover {
    color: #f5f5f5;
  }
  </code></pre>
  
  <p>But the result I'm looking for is this : </p>
  
  <pre><code>.btn-trans {
    color: inherit;
    background-color: transparent;
    transition: all .4s;
  }
  
  .btn-trans.btn-default {
    color: #bdbdbd;
  }
  
  .btn-trans.btn-primary {
    color: #738ffe;
  }
  
  .btn-trans.btn-default:hover,
  .btn-trans.btn-primary:hover {
    color: #f5f5f5;
  }
  </code></pre>
  
  <p>With the hover classes nested since the color is the same.</p>