Question

我有一个轻松的混音。当某个身体类存在时，我想改变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-class，也会应用my-style-changed（）。

Answer 1

方法1：（对基本版本和正文类特定版本使用不同的mixins）

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

.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：（对于基本版本和正文类特定版本使用相同的mixin）

或者，如果您希望避免使用两个不同的mixin并通过相同的mixin输出内容（默认的一个和.body-class *变体），可以像下面这样完成：

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

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

当体型存在时，改变LESS Mixin？

1 个答案: