CODEWITHSUNDEEP
csssassweb-component
omega
omega

Reputation: 43893

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

I have this sass code

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

but how can I turn it into like

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

SASS complains with a syntax error if I do that.

Upvotes: 2

Views: 1328

Answers (1)

Marvin
Marvin

Reputation: 10122

(.headroom) is not a valid selector on its own. I would either go with the unnested variant or make use of the @at-root directive:

:host { 
    padding:10px;

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

which outputs:

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

Upvotes: 1

Related Questions