@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 规则。