如何在同一个选择器上使用`&`和标签 [英] How to use `&` and a tag on the same selector

问题描述

我想写一个嵌套选择器来选择具有某个属性的某个标签，例如

I am trying to write a nested selector that selects a certain tag that has a certain attribute, for example

<li foo="bar">

若要选择此项， li [foo =bar] 会工作，但我想使用scss & [foo =bar] 因为我有 [foo =bar] 属性的其他东西（例如，< div foo =barclass = baz> ），我想将它们组合在一起。当我尝试：

To select this, li[foo="bar"] would work, but I want to nest it under [foo="bar"] using the scss & notation because I have other things with the [foo="bar"] attribute (e.g., <div foo="bar" class="baz">), and I want to group them together. When I try:

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

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

It returns an error that says li may only be used at the beginning of a compound selector, and if I try:

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

$ b b

那么它表示& 只能在复合选择器的开头使用。

then it says & may only be used at the beginning of a compound selector. How can I do this correctly?

推荐答案

最后我听说，这实际上是SASS 3.3或3.4中的一个即将到来的功能。

Last I heard, this is actually an upcoming feature in SASS 3.3 or 3.4.

请参阅此主题一个类似于您的问题和此主题的提议解决方案，包括（在写的时候，似乎是& __ element ）。

See this thread for a question similar to yours and this thread for the proposed solution to be included (which, at the time of writing, seems to be &__element).

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

The issue here isn't the use of [] and & together - it's the use of a plain element in the selector. Your example with .baz should work as expected.

这篇关于如何在同一个选择器上使用`&`和标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！