较少且有条件的父选择器

Question

我的结构就像这样一个：

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

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

有没有办法根据当前的父元素修改background-color？例如，对于.main1，我希望＃f00 作为背景，而.main2代替＃ff0 。

非常感谢！

Answer 1

可以在子项中指定父选择器（请参阅Changing Selector Order），例如：

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

虽然与简单的直接代码相比，它（即使不那么冗长）通常更不易读，也更容易受阻：

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