@at-root

该 @at-root 规则通常是编写的 @at-root <selector> {...} ，并导致其中的所有内容都在文档的根部发出，而不是使用正常的嵌套。它最常用于使用 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") {
    /* ... */
  }
}

.wrapper input.field {
  /* ... */
}

.wrapper select.field {
  /* ... */
}

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

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

超越风格规则

就其本身 @at-root 而言，只会摆脱样式规则。任何类似于 @mediaor 的规则 @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;
    }
  }
}

@media print {
  .page {
    width: 8in;
  }
}
.page {
  color: #111;
}
.page {
  font-size: 1.2em;
}

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

• rule指风格规则。例如，@at-root(with: rule)排除所有 at 规则但保留样式规则。
• all指应排除所有 at-rules 和 style 规则。