Я пытаюсь написать вложенный селектор, который выбирает определенный тег, который имеет определенный атрибут, например

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

тогда это говорит& может использоваться только в начале составного селектора. Как я могу сделать это правильно?