萨斯＆符，选择直接父母吗？

达蒙西里村村2020-03-23

在Sass中，有没有一种方法可以使用＆符号选择直接父级，而不是整个组的父级选择器？例如：

.wrapper{
    background-color: $colour_nav_bg;
    h1{
        color: $colour_inactive;
        .active &{
            color: red;
        }
    }
}

编译为：

.wrapper h1{
    color: grey;
}

.active .wrapper h1{
    color: red
}

但是我真正想要的是：

.wrapper .active h1{
    color: red;
}

这样写SCSS的唯一选择是吗？

.wrapper{
    background-color: $colour_nav_bg;
    h1{
        color: $colour_inactive;
    }
    .active h1{
        color: red;
    }
}

HTML看起来像这样：

<ul class="wrapper">
    <li class="active">
        <h1>blah</h1>
    </li>
</ul>

GO2020/03/23 09:32:02

我经常想做您要问的事情，这是不可行的。我听说您可以在Stylus中做这种事情。但是，您可以尝试另一种方法，该方法是将@at-root其传送到嵌套树之外。例如：

.wrapper{
    h1{
        @at-root .wrapper .active h1 {
            color: red;
        }
    }
}

这应该编译为以下内容：

.wrapper .active h1 {
  color: red;
}

令人高兴的是，您可以将选择器放在嵌套结构中出于组织目的在逻辑上有意义的位置。

番长樱梅2020/03/23 09:32:02

您需要将@ at-root内容包装在{}中

.wrapper {
    h1 {
        @at-root {
           .wrapper .active h1 {
                color: red;
           }
        }
    }
}

宝儿2020/03/23 09:32:02

在撰写本文时，没有用于元素的直接父代的Sass选择器。&如您所知，有哪个选择根父级。还有% 占位符选择器，它会隐藏规则直到扩展它。

Sass是开源的，因此您可以贡献一个新的“直接父级”选择器。

Newest Answer