Sass 选择器检查一个类是否位于任何祖先上

Question

是否可以编写一个 Sass 选择器来定位一个元素，该元素的祖先应用了某个类？

<div class="fruit">
    <div class="tree">
        <div class="apple">
            <div class="seed">I want this to go red.</div>
        </div>
    <div>
    <div class="bush">
        <div class="raspberry">
            <div class="seed">I don't want this to go red.<div>
        </div>
    <div>
<div>

是否可以写一些像这样的 Sass ？

.seed :ancestor-selector(.tree) {
    color: red;
}

...“我希望它变红”真的变红了吗？

这是一支笔，您可以尝试并使其发挥作用： https ://codepen.io/timrhaynes/pen/xxGNppx

Answer 1

是的。&你可以这样使用：

.seed {
    .tree & {
        /** Wow! I'm seed in tree! */
        color: red;
    }
}

您可以在Sass 文档中阅读有关父选择器的更多信息。