首页 文章

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

提问于
浏览 次
1

我正在使用＆：在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 作为"parent"而不是旁边 . 旧的mixin在mixin中包含了旁边的元素，但我想让它更灵活，与任何选择器一起使用 .

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

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

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

css if-statement sass parent

1 回答

  • 1

    使用 @else . 你可以在这里查看完整的文档：SASS Docs

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

    即，您的代码将成为：

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

相关问题