How to use SASS to factor out :host in CSS? -


i have sass code

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

but how can turn like

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

sass complains syntax error if that.

(.headroom) not valid selector on own. either go unnested variant or make use of @at-root directive:

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

which outputs:

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

Comments

Popular posts from this blog

Is there a better way to structure post methods in Class Based Views -

reflection - How to access the object-members of an object declaration in kotlin -

php - Doctrine Query Builder Error on Join: [Syntax Error] line 0, col 87: Error: Expected Literal, got 'JOIN' -