SASS：使用内部引用（＆）和@if…@else结构。 并选择其他人而不是父母

Question

我正在使用＆：在mixin中的SASS @if块中进行选择。

@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作为“父”，而不是放在一边。 旧的mixin在mixin中包含aside元素，但是我想使其更加灵活，以便与任何选择器一起使用。

我当前的解决方案是将选择器作为变量传递给mixin并以这种方式使用它：

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

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

Answer 1

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

基本上，SASS认为else是CSS关键字/标识符。 它必须以@ 。

即，您的代码将变为：

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