检查类是否在任何祖先上的 Sass 选择器答案

【问题标题】：Sass selector that checks if a class is on any ancestor检查类是否在任何祖先上的 Sass 选择器
【发布时间】：2020-04-02 20:51:43
【问题描述】：

是否可以编写一个 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

【问题讨论】：

标签： css sass selector parent ancestor

【解决方案1】：

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

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

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

【讨论】：

很遗憾，这不起作用。在这里查看笔：codepen.io/timrhaynes/pen/xxGNppx
它有效。你只是没有关闭你的div 标签。检查生成的 CSS。修正了你的错字：codepen.io/Jaxp/pen/YzXoXoj
天哪，你是对的！谢谢，这是完美的:-)

【解决方案2】：

使用＆符号在您的具体情况是可能的。

.seed {

  color: green;

  .tree & {

    color: red;

  }
}

直接回答。我不这么认为，虽然 CSS 喜欢从根部开始思考，然后朝着“叶子”方向组织，你可能也猜到了。

【讨论】：