title: How can I target an element within a class using less?
body: <p>I would like to target specific elements within a class using less. </p>
  
  <p>In this case, I would like to target elements of class <code>button</code>, but within that I would like to target an anchor tag <code>a</code>. </p>
  
  <p>Currently I have:</p>
  
  <pre><code>.button {
      /* lots of bits and pieces go here, hence 
      the need to keep it at a class level
      */
  
  
      /* further down, but still in .button */
      /* Attempt 1 - fails: compiled = a .button (note the space)
      a&amp; {
           height:20px;
      }
  
      /* Attempt 2 - fails: compiled = .buttona
      &amp;a {
          height:20px;
      }
  }
  </code></pre>
  
  <p>I basically want it to compile to:</p>
  
  <pre><code>a.button
  </code></pre>
  
  <p>This is so I can create elements such as:</p>
  
  <pre><code>&lt;a class="button"&gt;
  &lt;button class="button"&gt;
  </code></pre>
  
  <p>But slightly alter it when its an anchor. I don't want to throw in the <code>it's a bug in less!</code> card too early, but if I use <code>&amp;.another-class</code> it works as expected (compiled: <code>.button.another-class</code>, but not when targeting elements</p>