css - SCSS 祖先敏感选择器

Question

这似乎是某种必须以某种方式可行的事情，但我无法在任何地方找到答案。

是否可以使用 SCSS 来指定元素的样式变体基于它在某个祖先中？

例子:

我想要的 CSS:

.parent1 .element,
.parent2 .element {
    /* style for .element in both parents */
}
.parent1 .element {
    /* special style for .element only when in parent1 */
}

我想在 SCSS 中做什么:

.parent1,
.parent2 {
    .element {
        /* style for .element in both parents */

        [SOME SCSS MAGIC] {
            /* special style for .element only when in parent1 */        
        }
    }
}

否则，我可以放置此样式的最近位置在整个 .parent1, parent2 代码块之外，这太不方便了。

Answer 1

使用@at-root body .parent1 .element

  .parent1,
    .parent2 {
        .element {
            /* style for .element in both parents */
              background: yellow;
              color: green;
            @at-root body .parent1 .element {
              color: red;
                /* special style for .element only when in parent1 */
            }
        }
    }