在Sass中,您如何引用父选择器并排除任何祖父母？

Question

我有以下sass代码:

.class{
    label{
        color:#fff;
        .disabled &{color:#333; }
    }
}

哪个输出

.disabled .class label

有没有办法输出父选择器而不包含任何祖父母选择器？像这样:

.disabled label

Answer 1

尽管 hopper 并没有完全错误，但实际上您可以使用变量来选择祖父母。

您可以通过以下方式实现您想要的：

.class{
    label{
        color:#fff;

        $selector: nth(&,1);
        $direct-parent: nth($selector, length($selector));

        @at-root #{$direct-parent} {
          .disabled &{color:#333; }
        };
    }
}

这将生成这个 css：

.class label {
  color: #fff;
}
.disabled label {
  color: #333;
}

Answer 2

在使用父引用时,我无法在SASS中选择祖先选择器.但是,使用您的代码,稍微重组可以获得相同的结果:

label {
    .class & {
        color: #fff;
    }

    .disabled & {
        color:#333;
    }
}

编译为:

.class label {
  color: #fff; }
.disabled label {
  color: #333; }