当 body class 存在时改变 LESS Mixin？

Question

我有一个 LESS mixin。当存在某个主体 class 时，我想更改混入的一个值。

.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-altered() 也会被应用。

Answer 1

方法一：（基础版本和body-class特定版本使用不同的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：（基础版本和 body-class 特定版本使用相同的 mixin）

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

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

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

当 body class 存在时改变 LESS Mixin？

Alter LESS Mixin when body class is present?

less

less-mixins