Jak korzystać z SASS, aby rozróżnić: host w CSS? - css, sass, komponent sieciowy

Mam ten kod sass

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

ale jak mogę to zmienić w coś podobnego

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

SASS skarży się z błędem składni, jeśli to zrobię.

Odpowiedzi:

(.headroom) nie jest prawidłowym selektorem sam. Chciałbym pójść z niezagospodarowanym wariantem lub skorzystać z @at-root dyrektywa:

:host {
padding:10px;

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

który daje:

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