1

我有一个 LESS 混合。当存在某个身体类别时，我想更改 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 存在，我的样式更改（）也将应用于所有这些。

4

1 回答 1

1

方法1：（对基础版本和body-class特定版本使用不同的mixin）

是的，您可以避免多次编写所有选择器，.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 并.body-class *通过相同的 mixin 输出内容（默认的和变体），可以像下面这样完成：

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

.element, .element-2 {
  .mixin()
}
于 2015-02-19T12:50:56.183 回答