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

时间:2014-02-02 14:46:37

标签: css css-selectors sass

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

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

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

2 个答案:

答案 0 :(得分:4)

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

请参阅this thread以查找与您类似的问题,并this thread查看要包含的建议解决方案(在撰写本文时,似乎是&__element)。

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

答案 1 :(得分:3)

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