入口 at-root

@at-root 规则通常写成 @at-root <selector> { ... } 并导致其中的所有内容都在文档的根部发出，而不是使用正常的嵌套。 在使用 [SassScript 父选择器](/style-rules/parent-selector#in -sassscript) 和 选择器函数。

例如，假设您要编写一个匹配外部选择器和元素选择器的选择器。 您可以编写一个像这样的 mixin，它使用 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 只会摆脱 style rules。 任何类似 @media 或 @supports 的规则都将保留在 . 但是，如果这不是您想要的，您可以使用 媒体查询功能，写成@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 是指样式规则。 例如，@at-root (with: rule) 排除所有 at 规则但保留样式规则。
• all 指的是所有 at-rules and 样式规则应该被排除在外。