Less CSS: & reverse parent with multiple classes?

Question

This is the first time I find the selector and the parent selector extremely useful, so I don’t need to redefine the parents just to change the child.

Of course, this is really easy with LESS, but I have to ask!

<div id="skrollr-body" class="nonav"> <div class="skrollable"> </div> </div> #skroller-body { .skrollable { margin-top:40px; .nonav & { // this parent selector lets me modify // .skrollable without duplicating it margin-top:0px; } } } 

The output of .nonav & is .nonav #skroller-body .skrollable

I am wondering if I can get #skroller-body.nonav .skrollable instead somehow without additional HTML markup (wrapper div.nonav )?

I am currently just duplicating the parent

 #skrollr-body { margin-top:40px; left:0; width:100%; .skrollable { margin-top:40px; position:fixed; z-index:100; .skrollable { position:absolute; .skrollable { position:static; } } } &.nonav { .skrollable { margin-top:0px; } } } 

Or to save redundant output;

#skroller-body.nonav .scrollable { margin-top:0px; }

But the whole point here is CSS code that is easy to maintain and read.

Answer 1

Documents tell us:

The & operator represents the parent selectors of a nested rule and is most often used when applying a modifying class or pseudo-class to an existing selector

So:

 #skroller-body { &.nonav { .skrollable { // stuff } } } }