@at-root

该@at-root规则通常是书面的@at-root <selector> { ... }，并使其中的所有内容都在文档的根目录发出，而不是使用常规嵌套。这样做时，它的最经常使用先进的嵌套与SassScript家长选择和选择功能。

例如，假设您要编写一个与外部选择器和元素选择器匹配的选择器。你可以这样写一个使用一个混合selector.unify()功能结合&了用户的选择。

SCSS
Sass
css
SCSS  语法@use "sass:selector";

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

.wrapper .field {
  @include unify-parent("input") {
    /* ... */
  }
  @include unify-parent("select") {
    /* ... */
  }
}
Sass语法@use "sass:selector"

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



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

  @include unify-parent("select")
    /* ...


CSS  输出.wrapper input.field {
  /* ... */
}

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

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

???? 有趣的事实：

该@at-root规则也可以写成@at-root { ... }把多个样式规则的文档的根。其实，@at-root <selector> { ... }只是的简写 @at-root { <selector> { ... } }！

超越样式规则永久链接超越样式规则

就其本身而言，@at-root不仅摆脱的样式规则。任何类似@media或的规则@supports都将保留。但是，如果这不是您想要的，则可以使用诸如媒体查询功能，编写的@at-root (with: <rules...>) { ... } 或语法精确地控制它包含或包含的内容@at-root (without: <rules...>) { ... }。该(without: ...)查询告诉Sass应该排除哪些规则。该(with: ...)查询将排除除列出的规则以外的所有规则。

SCSS
Sass
css
SCSS  语法@media print {
  .page {
    width: 8in;

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

    @at-root (with: rule) {
      font-size: 1.2em;
    }
  }
}
Sass语法@media print
  .page
    width: 8in

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


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



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

除了规则名称外，还有两个可以在查询中使用的特殊值：

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