CODEWITHSUNDEEP
htmlcsssass
Consta Gorgan
Consta Gorgan

Reputation: 589

Selecting element in SCSS by referencing multiple parents on the same line

UPDATE: It was a typo. I wrote ".ltem" instead of ".item". The code below is correct.

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?

Upvotes: 0

Views: 145

Answers (1)

Raphael Rafatpanah
Raphael Rafatpanah

Reputation: 19967

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.

Upvotes: 1

Related Questions