title: LESS CSS: abusing the & Operator when nesting?
body: <p>Less uses the <code>&amp;</code> Operator to enhance the <a href="http://lesscss.org/features/#features-overview-feature-nested-rules" rel="nofollow noreferrer">possibilities for nesting</a>.</p>
  
  <pre><code>.header        { color: black;
    .navigation  { font-size: 12px;
      &amp;.class    { text-decoration: none }
    }
  }
  </code></pre>
  
  <p>which causes a substitution of the <code>&amp;</code> with the parent selector and results in a concatentation of the actual selector right to the parent selector: <code>.header .navigation.class</code> instead of the normal appending, which would result in <code>.class</code> being a decendant: <code>.header .navigation .class</code>.</p>
  
  <p>Now what also is possible is the following (<a href="https://stackoverflow.com/a/11522508/1047823">see also here</a>):</p>
  
  <pre><code>.header        { color: black;
    .navigation  { font-size: 12px;
      #some-id &amp; .foo   { text-decoration: none }
    }
  }
  </code></pre>
  
  <p>which would result in the following: <code>#some-id .header .navigation .foo</code> <a href="http://winless.org/online-less-compiler" rel="nofollow noreferrer">try here</a> . The substition takes place and i have <strong>prepended</strong> a selector (<code>#some-id</code>) to my parent selector.</p>
  
  <p>Besides the fact that I would never code this way, since this probably messes up your stylesheet in no time, my question:</p>
  
  <p><strong>As this functionality is not documented, is it a feature or more likely a bug?<br>
  Which are possible side-effects?</strong></p>