如何在同一个选择器上使用 `&` 和标签答案

【问题标题】：How to use `&` and a tag on the same selector如何在同一个选择器上使用 `&` 和标签
【发布时间】：2014-02-26 00:38:03
【问题描述】：

我正在尝试编写一个嵌套选择器，用于选择具有特定属性的特定标记，例如

<li foo="bar">

要选择它，li[foo="bar"] 可以工作，但我想使用 scss & 表示法将它嵌套在 [foo="bar"] 下，因为我还有其他带有 [foo="bar"] 属性的东西（例如，<div foo="bar" class="baz">），并且我想将它们组合在一起。当我尝试时：

[foo = "bar"]{
  &li{
    ...
  }
  &.baz{
    ...
  }
}

它返回一个错误，上面写着li 只能在复合选择器的开头使用，如果我尝试：

[foo = "bar"]{
  li&{
    ...
  }
  &.baz{
    ...
  }
}

然后它说& 只能用在复合选择器的开头。我怎样才能正确地做到这一点？

【问题讨论】：

【解决方案1】：

现在正确的语法是li#{&}。

【讨论】：

【解决方案2】：

我上次听说，这实际上是 SASS 3.3 或 3.4 中即将推出的功能。

请参阅this thread 了解与您的问题类似的问题，请参阅this thread 了解要包含的建议解决方案（在撰写本文时，似乎是&__element）。

这里的问题不是[] 和& 一起使用，而是在选择器中使用普通元素。您的 .baz 示例应该可以按预期工作。

【讨论】：