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

Question

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

<li foo="bar">

要选择它,li[foo="bar"]可以工作,但我想[foo="bar"]使用scss &表示法嵌套它,因为我有其他东西与[foo="bar"]属性(例如,<div foo="bar" class="baz">),我想将它们组合在一起.当我尝试:

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

它返回一个错误,表示li只能在复合选择器的开头使用,如果我尝试:

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

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

Answer 1

The right syntax nowadays would be li#{&}.

Answer 2

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

请参阅此线程以了解与您的问题类似的问题，并参阅此线程以获取要包含的建议解决方案（在撰写本文时，似乎是&__element）。

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