css - 如何在 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;
}

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

我有一种方法可以正确描述我想要的东西吗？显然，我可以摆脱嵌套并重复跨度选择器，但这会破坏 Less 的最大功能之一。有什么建议吗？

score 3 · Accepted Answer

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

编译为：

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

您可以在此处阅读有关&组合器的信息。

1 回答 1