CSS Question
Selecting element in SCSS by referencing multiple parents on the same line
Assuming that in out project we have only one stylesheet for those two pages underneath:
Example of an HTML page:
<div class="container-first">
...
<div class="item"> </div>
...
</div>
Example of another HTML page:
<div class="container-second">
...
<div class="item"> </div>
...
</div>
I know one can select an element (.item) in SCSS by using a parent node reference like this:
.item {
.container-first & {
background: black
}
.container-second & {
background: black
}
}
But how can we reference multiple parent nodes for the same child element on the same line?
I did this but it's not working:
.item {
.container-first &, .container-second & {
background: black
}
}
And I couldn't find anything enlightening on the internet.
In other words, how can I do to select the ".item" element by referencing multiple parents on the same line inside the ".item"'s curly brackets?
Recommended for you: Get network issues from WhatsUp Gold. Not end users.
Answer Source
It does work.
The following SCSS
.item {
.container-first &, .container-second & {
background: black
}
}
compiles to:
.container-first .item, .container-second .item {
background: black;
}
Try it in the online sass playground.
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download