Sass 选择器，检查 class 是否在任何祖先上

Question

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

<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;
}

..."I want this to go red" 真的变红了吗？

这里有一支笔，您可以尝试让它发挥作用： https://codepen.io/timrhaynes/pen/xxGNppx

Answer 1

是的。您可以像这样使用 &：

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

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

Answer 2

在您的具体情况可能出现后，使用符号。

.seed { color: green; .tree & { color: red; } }

直接回答。我认为不是，而 CSS 喜欢从根开始思考，然后朝着 'leaves' 的方向组织，正如您可能也猜到的那样。

Sass 选择器，检查 class 是否在任何祖先上

Sass selector that checks if a class is on any ancestor

css

sass

parent

selector

ancestor