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

我用更少的时间写了以下规则。其目的是使

span

以粗体显示，并根据应用的类别选择颜色：

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

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

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

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

我有没有办法用更少的语言来正确描述我想要的？很明显，我可以去掉嵌套并重复span选择器，但这会破坏Less的一个最大特性。有什么建议吗

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

汇编至：

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

您可以阅读有关

和
组合器的信息

汇编至：

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

您可以阅读有关
和
组合器的信息