Cómo usar `&` y una etiqueta en el mismo selector

Estoy tratando de escribir un selector anidado que selecciona una etiqueta determinada que tiene un atributo determinado, por ejemplo

<li foo="bar">

Para seleccionar esto,li[foo="bar"] Funcionaría, pero quiero anidarla debajo[foo="bar"] usando el scss& Notación porque tengo otras cosas con la[foo="bar"] atributo (por ejemplo,<div foo="bar" class="baz">), y quiero agruparlos. Cuando intento

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

Devuelve un error que diceli Solo se puede usar al comienzo de un selector compuesto, y si lo intento:

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

entonces dice& Solo se puede utilizar al comienzo de un selector de compuestos. ¿Cómo puedo hacer esto correctamente?

Respuestas a la pregunta(2)

Su respuesta a la pregunta