Lzh on GitHub

@at-root

@at-root 规则通常写作 @at-root <selector> { ... }，它会使其中所有内容在文档的根部发出，而不是使用正常的嵌套。它最常用于使用 SassScript 父选择器和选择器函数进行高级嵌套时。

@at-root 规则通常写作 @at-root <selector> { ... }，它会使其中所有内容在文档的根部发出，而不是使用正常的嵌套。它最常用于使用 SassScript 父选择器和选择器函数进行高级嵌套时。

例如，假设你想编写一个匹配外部选择器和元素选择器的选择器。你可以编写一个像这样的混合宏，它使用 selector.unify() 函数将 & 与用户的选择器组合在一起。

@use "sass:selector";

@mixin unify-parent($child) {
  @at-root #{selector.unify(&, $child)} {
    @content;
  }
}

.wrapper .field {
  @include unify-parent("input") {
    /* ... */
  }
  @include unify-parent("select") {
    /* ... */
  }
}

这里的 @at-root 规则是必需的，因为当 Sass 执行选择器嵌套时，它不知道用于生成选择器的插值是什么。这意味着即使你将 & 用作 SassScript 表达式，它也会自动将外部选择器添加到内部选择器中。@at-root 明确告诉 Sass 不要包含外部选择器（尽管它将始终作为表达式包含在 & 中）。

@at-root 规则也可以写成 @at-root { ... }，以将多个样式规则放在文档的根部。事实上，@at-root <selector> { ... } 只是 @at-root { <selector> { ... } } 的简写！

超越样式规则

就其本身而言，@at-root 只会摆脱样式规则。任何像 @media 或 @supports 这样的 at-rules 都将保留下来。如果你不想要这样，你可以使用像媒体查询功能这样的语法精确控制它包含或排除什么，写作 @at-root (with: <rules...>) { ... } 或 @at-root (without: <rules...>) { ... }。(without: ...) 查询告诉 Sass 应该排除哪些规则；(with: ...) 查询排除所有规则，除了列出的那些。

@media print {
  .page {
    width: 8in;

    @at-root (without: media) {
      color: #111;
    }

    @at-root (with: rule) {
      font-size: 1.2em;
    }
  }
}

除了 at-rule 的名称之外，还有两个特殊值可以在查询中使用：

  • rule 指的是样式规则。例如，@at-root (with: rule) 排除所有 at-rules 但保留样式规则。
  • all 指的是所有 at-rules 和样式规则都应该被排除。