Less and conditional parent selector

Question

I have a less structure just like this one:

.main1,
.main2,
.main3,
.main4{
    & .test1{
       background-color: #f00;
    }

    & .test2{
       background-color: #ff0;
    }
}

Is there a way to modify the background-color according to the current parent element? For example for .main1 I would like #f00 as background, and for .main2 instead, #ff0.

Thanks a lot!

Have a look at [less-css — is it possible to get a parent's parent?](http://stackoverflow.com/questions/17286742/less-css-is-it-possible-to-get-a-parents-parent) — ndd, Nov 10 '15 at 20:48

score 1 · Answer 1 · answered Nov 10 '15 at 21:47

It's possible to specify parent selector inside the child one (see Changing Selector Order), e.g.:

.test {
   .main1 & {background-color: red}
   .main2 & {background-color: blue}
}

Though it's (even if less verbose) often much less readable and more hindered if compared to just plain straight-forward code:

.main1 .test {background-color: red}
.main2 .test {background-color: blue}

Less and conditional parent selector

1 Answers1