css - commands - node-sass

Utilice el símbolo comercial final(&) como selector de combinación de clases, no como selector descendiente

Question

Quiero aplicar una clase .highlight a un grupo de diferentes elementos y .highlight de acuerdo con el tipo de elemento. Yo podría hacer esto:

input[type="text"].highlight {...}
select.highlight {...}
someOtherSelector.hightlight {...}

Pero estoy tratando de usar el símbolo comercial final (&) para hacer que mi código sea más sucinto.

He intentado lo siguiente:

.highlight {

    input[type="text"].& {
        border: 1px solid $brand-purple;
    }
}

Pero me sale el siguiente error:

Error: la propiedad "entrada" debe ir seguida de un '':''

También lo intenté:

.highlight {

    input[type="text"]& {
        border: 1px solid $brand-purple;
    }
}

Pero me sale el siguiente error:

La CSS no válida después de "[type =" text "]": expected "{", was "&" "&" solo se puede usar al comienzo de un selector compuesto.

¿Hay alguna forma de evitar esto, o esto simplemente no se puede hacer en SASS?

Answer 1

Necesitas reorganizar tu scss un poco, lo que necesitas es:

input[type="text"]  {
  &.highlight {
    border: 1px solid $brand-purple;
  }
}

* Editar después de su actualización, puede usar @ at-root:

.highlight {
  @at-root {
    input[type="text"]  {
      &.highlight {
        border: 1px solid $brand-purple;
      }
    }
  }
}

Answer 2

Use #{&} lugar de solo .& . Y use @at-root que le permite salir completamente de su estructura de anidamiento hasta la "raíz" de su árbol de anidación.

Escribe esto en SASS:

.highlight {

  @at-root input[type="text"]#{&} {
      border: 1px solid $brand-purple;
  }
}

Esto cumplirá en CSS para:

input[type="text"].highlight {
  border: 1px solid purple;
}

¡Espero que esto ayude!