当身体课出现时，不要改变密辛？

Question

我的混音少了。当存在某个body类时，我希望更改mixin的一个值。

.my-style() {
  font-weight: bold;
  color: red;
}

.my-style-altered() {
  color: blue;
}

.element {
  .my-style;
}

.body-class .element {
  .my-style-altered;
}

这很好用。然而，我的选择器列表越来越长：

.my-style() {
  font-weight: bold;
  color: red;
}

.my-style-altered() {
  color: blue;
}

.element,
.element-2,
.element-3 {
  .my-style;
}

.body-class .element, 
.body-class .element-2,
.body-class .element-3 {
  .my-style-altered;
}

有没有一种更聪明的方法来写我的选择器列表，这样我就不用重复两遍了？理想情况下，我只写一次它们，如果存在..body类，那么我的风格更改()也将被应用。

Answer 1

方法1: (对基本版本和主体类特定版本使用不同的混合)

是的，您可以避免多次编写所有选择器，方法是在泛型选择器中嵌套选择器的.body-class *变体，并添加父选择器，如下面的代码段所示。在编译此代码时，较少的编译器将自动将&替换为每个父选择器。

.my-style() {
  font-weight: bold;
  color: red;
}

.my-style-altered() {
  color: blue;
}

.element, .element-2, .element-3 {
  .my-style;
  .body-class &{
      .my-style-altered;
  }
}

编译的CSS:

.element, .element-2, .element-3 {
  font-weight: bold;
  color: red;
}
.body-class .element,
.body-class .element-2,
.body-class .element-3 {
  color: blue;
}

方法2: (在基本版本和主体类特定版本中使用相同的混音)

另外，如果您希望避免使用两种不同的混音，并通过相同的混搭输出内容(默认的和.body-class *变体)，可以如下所示：

.mixin() {
  font-weight: bold;
  color: red;
    .body-class &{
        color: blue;
    }
}

.element, .element-2 {
  .mixin()
}