@at-root

@at-root 规则通常写作 @at-root <selector> { ... }，并导致其中的所有内容在文档的根部发出，而不是使用正常的嵌套。当用 SassScript 父选择器 和 选择器功能 进行 高级嵌套 时，最常使用它。

For example, suppose you want to write a selector that matches the outer selector and an element selector. You could write a mixin like this one that uses the selector.unify() function to combine & with a user’s selector.

Playground

SCSS Syntax

@use "sass:selector";

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

.wrapper .field {
  @include unify-parent("input") {
    /* ... */
  }
  @include unify-parent("select") {
    /* ... */
  }
}
Playground

Sass Syntax

@use "sass:selector"

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



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

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

CSS Output

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

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

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

¥The @at-root rule is necessary here because Sass doesn’t know what interpolation was used to generate a selector when it’s performing selector nesting. This means it will automatically add the outer selector to the inner selector even if you used & as a SassScript expression. The @at-root explicitly tells Sass not to include the outer selector.

💡 Fun fact:

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

¥The @at-root rule can also be written @at-root { ... } to put multiple style rules at the root of the document. In fact, @at-root <selector> { ... } is just a shorthand for @at-root { <selector> { ... } }!

超越样式规则超越样式规则 permalink

¥Beyond Style Rules

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

¥On its own, @at-root only gets rid of style rules. Any at-rules like @media or @supports will be left in. If this isn’t what you want, though, you can control exactly what it includes or excludes using syntax like media query features, written @at-root (with: <rules...>) { ... } or @at-root (without: <rules...>) { ... }. The (without: ...) query tells Sass which rules should be excluded; the (with: ...) query excludes all rules except those that are listed.

Playground

SCSS Syntax

@media print {
  .page {
    width: 8in;

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

    @at-root (with: rule) {
      font-size: 1.2em;
    }
  }
}
Playground

Sass Syntax

@media print
  .page
    width: 8in

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


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

CSS Output

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

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

¥In addition to the names of at-rules, there are two special values that can be used in queries:

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

    ¥rule refers to style rules. For example, @at-root (with: rule) excludes all at-rules but preserves style rules.

  • all 指的是所有 at 规则，并且应排除样式规则。

    ¥all refers to all at-rules and style rules should be excluded.