css - Overriding nesting, to stay in scope -

css - Overriding nesting, to stay in scope -

i wondering if override nesting in less, remain in scope - because it's simpler... :-)

if have element has 2 states, depending on let's body-class, need define 2 css objects. have one, per module.

.module { h1 { float: left; } } body.secondary { .module { h1 { float: right; } } }

like when define parent &, there way overwrite parent?? maybe this:

.module { h1 { float: left; } &=body.secondary { h1 { float: right; } } }

where & defined selector...

this awesome, , create css more simple in terms of 1 css object per module.

thanks... :-)

i've done extensive commentary on both in this answer , this answer. in particular case, this:

less

.module { h1 { float: left; body.secondary & { float: right; } } }

css output

.module h1 { float: left; } body.secondary .module h1 { float: right; }

the key realize & not targeting "parent" per se in html structure, rather string replacement entire nested construction sits within. in solution above, nested less "parent" .module h1 string replaced @ & point in body.secondary & build nested within it.

css less