如何使用 Less 在另一个类中应用串联类？

【问题标题】：How to apply concatenated classes within another class using Less?如何使用 Less 在另一个类中应用串联类？
【发布时间】：2018-05-10 20:47:06
【问题描述】：

假设我有以下 Less 设置：

.box {
 border: 1px solid #333;
 &.error {
  background-color: Red;        
 }
}

如果我想声明另一个应用了 .box.error 完整样式的类，例如 .error-box，那么正确的语法是什么？

如果我使用：

.error-box {
 .box.error;
}

我得到的只是红色背景，没有边框。我尝试了许多不同的组合，但总是出现语法错误。

【问题讨论】：

标签： less

【解决方案1】：

我这样插入了你的 less：

.box {
   border: 1px solid #333;
   &.error {
      background-color:red; 
   }
}

.error-box {
    .box;
}

CSS 输出是这样的：

.box {
  border: 1px solid #333;
}
.box.error {
  background-color: red;
}
.error-box {
  border: 1px solid #333;
}
.error-box.error {
  background-color: red;
}

您是否希望 .error-box 类单独接收这两种样式？我能想到的唯一方法是：

.error-bg {
    background:red;
}

.box {
    border:1px solid #333;
    &.error {
        .error-bg;
    }
}

.error-box {
    .box;
    .error-bg;
}

【讨论】：