title: Less CSS: & reverse parent with multiple classes?
body: <p>This is the first time I'm finding the &amp; parent selector extremely useful so that I don't need to redefine parents simply to modify a child element.</p>
  
  <p>Of course this is actually easy with LESS, but I have to ask!</p>
  
  <pre><code>&lt;div id="skrollr-body" class="nonav"&gt;
      &lt;div class="skrollable"&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  #skroller-body {
      .skrollable {
          margin-top:40px;
  
          .nonav &amp; {
              // this parent selector lets me modify 
              // .skrollable without duplicating it
              margin-top:0px;
  
          }
      }
  }
  </code></pre>
  
  <p>The output of <code>.nonav &amp;</code> is 
  <code>.nonav #skroller-body .skrollable</code></p>
  
  <p>I'm wondering if I can get <code>#skroller-body.nonav .skrollable</code> instead somehow without extra HTML markup (a wrapper <code>div.nonav</code>)? </p>
  
  <p>Currently I'll just duplicate the parent </p>
  
  <pre><code>#skrollr-body {
      margin-top:40px;
      left:0;
      width:100%;
  
      .skrollable {
          margin-top:40px;
          position:fixed;
          z-index:100;
          .skrollable {
              position:absolute;
  
              .skrollable {
                  position:static;
              }
          }
      }
      &amp;.nonav {
              .skrollable {
                   margin-top:0px;
              }
      }
  }
  </code></pre>
  
  <p>Or to save redundant output;</p>
  
  <p><code>#skroller-body.nonav .scrollable { margin-top:0px; }</code> </p>
  
  <p>But the whole point here is CSS code that's <em>easy to maintain and read</em>.</p>