How to use `&` and a tag on the same selector

Question

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

<li foo="bar">

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

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

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

Answer 1

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