È possibile assegnare uno stile ai genitori di un certo tipo di elemento in SASS?

Question

Voglio fare questo:

.classname { 
    color: red 

    a& { 
    color: blue; 
    } 
} 

e per la sua compilazione a:

.classname { 
    color: red; 
} 

a.classname { 
    color: blue; 
} 

C'è sintassi disponibili per sostenere questo? Ho provato a utilizzare a&, #{a&} e la funzione bussola #{append-selector("a", "&")} ma non si compila, lo fa a &, ma i risultati, ovviamente, in a .classname anziché a.classname.

Answer 1

Questo non è realmente possibile con la sintassi nidificata per SASS. Da SASS reference:

La regola interna si applica solo all'interno del selettore della regola esterna.

Le regole nidificate sono zucchero sintattico che rende più semplice scrivere CSS descendent selectors, poiché sono uno dei costrutti CSS più comuni. Mentre è bello usare il tuo approccio per scrivere quel tipo di regola, non è ciò che la sintassi è progettata (o definita) per fare.

Answer 2

Ho provato a pensare attraverso varie opzioni che ti permettessero di farlo, ma posso solo tornare con "perché"? Qual è il caso d'uso, e perché hai bisogno di fare questo vs qualcos'altro che raggiunge lo stesso risultato di quello che ti piacerebbe fare.

Answer 3

Non sono riuscito a trovare una soluzione per i tag, ma in questo caso specifico è possibile utilizzare &[href]. E 'più lento, ma in realtà è più preciso (alcune <a> tag potrebbero non essere link.)

Speriamo che presto saremo in grado di utilizzare &:any-link (What's the :any-link pseudo-class for?), ma non è supportato dai browser ancora