如何在Less中嵌套规则以定义类行为

Question

我在Less中写了以下规则。目的是使span以粗体显示，颜色取决于应用于它的类：

span {
    font-weight: bold;
    .cheapest { color: green; }
    .expensive { color: red; }
}

受影响的文本正确应用粗体规则，但不应用颜色规则。我在Visual Studio中看到，这被编译成以下CSS：

 span .cheapest {
  color: #00ff00;
 }
span .expensive {
  color: #ff0000;
}

元素和类之间的空间就像将元素的颜色应用于最便宜或昂贵的类，它们是span 的子元素，不是我想要的。

我在Less中有一种方法可以正确描述我想要的东西吗？显然，我可以摆脱嵌套并重复跨度选择器，但这将击败Less的一个最大特点。有什么建议吗？

Answer 1

span {
    font-weight: bold;
    &.cheapest { 
    color: green; 
    }
    &.expensive { 
    color: red; 
    }
}

编译为：

span {
  font-weight: bold;
}
span.cheapest {
  color: green;
}
span.expensive {
  color: red;
}

您可以阅读&组合子here。