Auswählen von Element in SCSS durch Verweisen auf mehrere Eltern in derselben Zeile

Question

UPDATE: Es war ein Tippfehler. Ich habe ".ltem" anstatt ".item" geschrieben. Der folgende Code ist korrekt.

Unter der Annahme, dass in aus Projekt, das wir nur ein Stylesheet für die beiden Seiten haben unter:

Beispiel einer HTML-Seite:

<div class="container-first"> 
    ... 
    <div class="item"> </div> 
    ... 
</div> 

Beispiel einer anderen HTML-Seite:

<div class="container-second"> 
    ... 
    <div class="item"> </div> 
    ... 
</div> 

Ich weiß, dass man ein Element (.item) in SCSS auswählen kann, indem man einen Eltern-Knoten-Verweis wie folgt verwendet:

.item { 
    .container-first & { 
     background: black 
    } 
    .container-second & { 
     background: black 
    } 
} 

Aber wie können wir mehrere Elternknoten für dasselbe untergeordnete Element in derselben Zeile referenzieren?

Ich tat dies, aber es funktioniert nicht:

.item { 
    .container-first &, .container-second & { 
     background: black 
    } 
} 

Und ich kann nichts erhellend im Internet finden.

Mit anderen Worten, wie kann ich das ".item" -Element durch Verweisen auf mehrere Eltern in der gleichen Zeile innerhalb der geschweiften Klammern ".item" tun?

Answer 1

Es funktioniert.

Die folgende SCSS

.item { 
    .container-first &, .container-second & { 
     background: black 
    } 
} 

kompiliert:

.container-first .item, .container-second .item { 
     background: black; 
} 

es im online sass playground Versuchen.