同じ行の複数の親を参照してSCSS内の要素を選択する

Question

更新： これはタイプミスです。私は ".item"の代わりに ".ltem"を書きました。以下のコードは正しいです。 HTMLページの

例：別のHTMLページの

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

例：

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

はアウトプロジェクトで私たちは下に、これらの2つのページのために一つだけのスタイルシートを持っていると仮定すると、

私はSCSSの要素（.item）を次のような親ノード参照を使って選択できることを知っています：

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

しかし、同じ行の同じ子要素に対して複数の親ノードを参照するにはどうすればよいですか？

私はこれをしなかったが、それは働いていない：

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

そして私は、インターネット上の啓発何かを見つけることができませんでした。

つまり、同じ行の複数の親を参照して ".item"要素を選択するにはどうすればいいですか ".item"の中括弧？

Answer 1

効果があります。

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

online sass playgroundでそれを試してみてください。

次SCSS

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

はにコンパイルされます。