Come utilizzare SASS per il calcolo: host nei CSS? - css, sass, componente web

Ho questo codice sass

:host {
padding:10px;
}
:host(.headroom) {
position: fixed;
}

ma come posso renderlo simile

:host {
padding:10px;
&(.headroom) {
position: fixed;
}
}

SASS si lamenta di un errore di sintassi se lo faccio.

risposte:

(.headroom) non è un selettore valido da solo. O andrei con la variante non innestata o fare uso del @at-root direttiva:

:host {
padding:10px;

@at-root #{&}(.headroom) {
position: fixed;
}
}

quali uscite:

:host {
padding: 10px;
}
:host(.headroom) {
position: fixed;
}