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

Posted 2021-04-18

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

<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{
    ...
  }
}

然后它说&可能只在复合选择器的开头使用。我该怎么做才能正确？

答案

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

请参阅this thread以获得与您和this thread类似的问题，以便包含所提出的解决方案（在撰写本文时，似乎是&__element）。

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

另一答案

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