我正在使用&:在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() {}
}

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

===============>>#1 票数:1 已采纳

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

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

即,您的代码将变为:

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

  ask by Paul translate from so

未解决问题?本站智能推荐: