是否可以在 SASS 中设置某种元素类型的父级样式？答案

【问题标题】：Is it possible to style parents of a certain element type in SASS?是否可以在 SASS 中设置某种元素类型的父级样式？
【发布时间】：2011-11-26 00:29:39
【问题描述】：

我想这样做：

.classname {
  color: red

  a& {
    color: blue;
  }
}

并将其编译为：

.classname {
   color: red;
}

a.classname {
   color: blue;
}

是否有可用的语法来支持这一点？我曾尝试使用a&、#{a&} 和罗盘函数#{append-selector("a", "&")}，但它们无法编译，a & 可以编译，但结果显然是a .classname 而不是a.classname。

【问题讨论】：

【解决方案1】：

这对于 SASS 的嵌套语法实际上是不可能的。来自SASS reference：

然后，内部规则仅适用于外部规则的选择器。

嵌套规则是使 CSS 的 descendent selectors 更容易编写的语法糖，因为它们是最常见的 CSS 结构之一。虽然使用您的方法编写此类规则很好，但这并不是设计（或定义）语法的目的。

【讨论】：

实际上，“设计用途”和他想要做的事情之间的唯一区别是他尝试使用 tag 而不是 class、属性或伪选择器。 &.cool、&[href]、&:hover 都可以，a& 或 &a 不行。
@bfred.it 什么？这仍然是不可能的 - 这值得否决吗？
是的，对不起。其中一半是不正确和不相关的信息。如果得到纠正，我很乐意取消投票
@bfred.it 但它并不正确。语法不按照他尝试使用的方式工作。您的反例是为原始选择器添加修饰符，而他试图通过在修饰符之前插入标签来朝另一个方向前进 - SASS 没有这样做。

【解决方案2】：

我尝试过各种选项让你这样做，但我只能带着“为什么”回来？用例是什么，为什么需要这样做而不是其他可以达到与您想做的相同结果的方法。

【讨论】：

【解决方案3】：

我无法找到标签的解决方案，但在这种特定情况下，您可以使用 &[href]。它更慢但实际上更精确（一些<a> 标签可能不是链接。）

希望我们很快就能使用&:any-link (What's the :any-link pseudo-class for?)，但浏览器还不支持它

【讨论】：