¿Es posible asignarle un estilo a los padres de un cierto tipo de elemento en SASS?

Question

quiero hacer esto:

.classname { 
    color: red 

    a& { 
    color: blue; 
    } 
} 

y para que se compile a:

.classname { 
    color: red; 
} 

a.classname { 
    color: blue; 
} 

¿Hay sintaxis disponibles para apoyar esto? He intentado usar a&, #{a&} y la función de brújula #{append-selector("a", "&")} pero no compilan, a & sí, pero los resultados, obviamente, en a .classname en lugar de a.classname.

Answer 1

Esto no es realmente posible con la sintaxis anidada para SASS. Desde SASS reference:

La regla interna solo se aplica dentro del selector de la regla externa.

reglas anidadas son azúcar sintáctica que hace CSS de descendent selectors más fácil de escribir, ya que son una de las construcciones más comunes de CSS. Si bien es bueno usar su enfoque para escribir ese tipo de regla, no es lo que la sintaxis está diseñada (o definida) para hacer.

Answer 2

Traté de pensar a través de varias opciones que te permitirían hacer esto, pero solo puedo volver con "¿por qué? ¿Cuál es el caso de uso, y por qué necesita hacer esto vs otra cosa que logra el mismo resultado que lo que le gustaría hacer.

Answer 3

No he podido encontrar una solución para las etiquetas, pero en este caso específico puede usar &[href]. Es más lento, pero en realidad es más precisa (algunos <a> etiquetas pueden no ser enlaces.)

Esperemos que pronto vamos a ser capaces de utilizar &:any-link (What's the :any-link pseudo-class for?) pero no es soportado por los navegadores todavía