css - SASS:在内部使用父引用 (&) 和 @if ... @else 结构。 & 选择 else 而不是 parent

Question

我在 mixin 内的 SASS @if block 内使用 &: select。

@mixin mixin-name {
   @if (condition) {
        .....
   } else {
        &:nth-of-type(...) {}
   }
}

&:Nth-of-type 是 mixin 中最外层的实际选择器。在我的代码中，我这样使用它:

aside {
    @include mixin-name;
}

我在 CSS 输出中期待这个:

aside:nth-of-type() {}

相反，我得到了这个:

aside else:nth-of-type() {}

很明显，SASS 将 else 作为“parent”而不是 aside。旧的 mixin 在 mixin 中包含 aside 元素，但我想让它更灵活，以便与任何选择器一起使用。

我目前的解决方案是将选择器作为变量传递到混入中并以这种方式使用它:

#{$var} {
    &:nth-of-type() {}
}

这行得通，但是 & 应该选择一段代码而不是实际的选择器，这似乎是一个错误。谁有更优雅的解决方案？

Answer 1

使用@else。您可以在此处查看完整文档:SASS Docs

基本上，SASS 认为 else 是一个 CSS 关键字/标识符。它需要以 @ 为前缀。

即，您的代码将变为:

@mixin mixin-name {
   @if (condition) {
        .....
   } @else {
        &:nth-of-type(...) {}
   }
}