SASS或SCSS使用符号和

如何使用SASS/SCSS实现这一点

sass：

它应该生成以下css：

.orange {
  color: #ffa500;
}

button.orange {
  background: $orange;
  color: black;
}

我可以使用

&

作为变量，但它需要根目录下的

@

并且它不是真正可读的/好的：

.orange:
  @at root
    button#{&}
      color: white

单独使用时，

&

选择器工作得很好，但该语言似乎不允许以我想要的方式使用它。任何想法？

“&”只能在复合选择器的开头使用。

但是你可以给你的按钮一个类，把它放在

&

“&”只能在复合选择器的开头使用。

但是你可以给你的按钮一个类，把它放在

&

---

谢谢，但它添加了一个类，我希望避免添加类以保持html可读性，特别是当这些类用于解决语言缺陷时：-/<代码>只是多余的，在解决此语言问题的上下文之外是无用的。有一些命名约定可能与您不一致，这是一个示例，但您可以按照自己认为合适的方式编写代码。不管怎样，我花时间回答你的问题<代码>你不能那样做。如果你接受了答案，那就太酷了。BEM哲学确实增加了类来提供语义价值<代码>按钮。破解语言缺陷的按钮不属于这一类。到目前为止，我更喜欢我建议的解决方案，谢谢您的时间。谢谢，但它添加了一个类，我希望避免添加类以保持html可读性，特别是当这些类用于解决语言缺陷时：-/<代码>只是多余的，在解决此语言问题的上下文之外是无用的。有一些命名约定可能与您不一致，这是一个示例，但您可以按照自己认为合适的方式编写代码。不管怎样，我花时间回答你的问题<代码>你不能那样做。如果你接受了答案，那就太酷了。BEM哲学确实增加了类来提供语义价值<代码>按钮。破解语言缺陷的按钮不属于这一类。到目前为止，我更喜欢我建议的解决方案，谢谢您的时间。

.orange:
  @at root
    button#{&}
      color: white

$orange: orange

.orange
  color: $orange
  &.button
    background: $orange
    color: black