Как да използваме SASS за факториране: хост в CSS? - css, sass, уеб компонент

Имам този код

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

но как да го превърна в подобен

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

SASS се оплаква от синтактична грешка, ако го направя.

Отговори:

(.headroom) самостоятелно не е валиден селектор. Аз или ще отида с непробития вариант, или ще използвам @at-root директива:

:host {
padding:10px;

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

който извежда:

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