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>
<div class="container-second">
...
<div class="item"> </div>
...
</div>
.item {
.container-first & {
background: black
}
.container-second & {
background: black
}
}
.item {
.container-first &, .container-second & {
background: black
}
}
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.