Wie man SASS ausnutzt: Host in CSS? - CSS, Hass, Web-Komponente

Ich habe diesen Sass-Code

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

aber wie kann ich es gerne machen?

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

SASS beschwert sich mit einem Syntaxfehler, wenn ich das tue.

Antworten:

(.headroom) ist kein gültiger Selektor. Ich würde entweder mit der nicht getesteten Variante gehen oder die @at-root Richtlinie:

:host {
padding:10px;

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

welche Ausgänge:

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