css - 检查类是否在任何祖先上的 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

标签： csssassselectorparentancestor

Answer 1

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

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

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