Question

更新 这是一个错字。我写了“.ltem”而不是“.item”。以下代码是正确的。

假设在out project项目中我们只有一个样式表用于下面的两个页面：

HTML页面示例：

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

另一个HTML页面的示例：

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

我知道可以使用父节点引用在SCSS中选择元素（.item），如下所示：

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

但是，如何在同一行上为同一个子元素引用多个父节点？

我做了这个，但它不起作用：

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

我在互联网上找不到任何有启发性的东西。

换句话说，如何通过引用同一行里面“.item”的大括号中的多个父元素来选择“.item”元素？

Answer 1

确实有效。

以下SCSS

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

汇编为：

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