如何使用Less在另一个类中应用连接类？

Question

假设我有以下Less设置:

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

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

如果我使用:

.error-box {
 .box.error;
}

我得到的只是红色背景,没有边框.我尝试了很多不同的组合,但我总是遇到语法错误.

Answer 1

我插入你的少了如此:

.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;
}