Sass @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") {
    /* ... */
  }
}

编译为 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: ...)查询将排除除列出的规则以外的所有规则。

@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指所有规则，应排除样式规则。