当身体类存在时改变 LESS Mixin？答案

【问题标题】：Alter LESS Mixin when body class is present?当身体类存在时改变 LESS Mixin？
【发布时间】：2015-02-20 14:40:20
【问题描述】：

我有一个 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 存在，我的样式更改（）也将应用于所有这些。

【问题讨论】：

标签： less less-mixins

【解决方案1】：

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

是的，您可以避免多次编写所有选择器，方法是将选择器的.body-class * 变体嵌套在通用选择器中，并像下面的 sn-p 一样附加父选择器。编译此代码时，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()
}

【讨论】：