管理LESS中的嵌套

Question

我希望得到像

这样的东西

.classA, .classB, .classC, .classD, .classE {
  color: white;
}

.classA .classI, .classB .classI, classC .classI {
  background: red;
}

这可能与

类似

.classA, .classB, .classC {
  color: white;
  .classI {
    background: red;  
  }
}

D级和E级不应该是I级。

希望你知道，我的意思

Answer 1

对于您的情况，您不应在顶层使用.classD和.classE，因为嵌套选择器不适用于所有这些选项卡。

您应该使用.classA, .classB, .classC，然后将:extend用于其他两个。

.classA, .classB, .classC {
  color: white;
  .classI {
    background: red;  
  }
}
.classD, .classE {
  &:extend(.classA);
}

编译时会产生以下CSS：

.classA, .classB, .classC, .classD, .classE {
  color: white;
}
.classA .classI, .classB .classI, .classC .classI {
  background: red;
}

Answer 2

是这样的：

.classA {
  color: white;
  &.classI {
    background: red;  
  }
}