Consta Gorgan Consta Gorgan - 1 year ago 79
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?

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