萨斯| @at-root 规则

@at-root 规则在文件的根部发出规则内的所有内容，而不是使用正常的嵌套。它主要用于与 SassScript 父选择器和选择器函数的高级嵌套。

句法：

@at-root  { ... }

例子：

@use "sass:selector"
  
@mixin geeks($gfg)
  @at-root #{selector.unify(&, $gfg)}
    @content
  
.block .font
  @include geeks("input")
    times new roman
  
  @include geeks("select")
    arial

这将导致以下输出：

.block input.font {
  times new roman;
}

.block select.font {
  arial;
}

@at-root 规则在上面的例子中是必需的，因为 Sass 不知道在执行选择器嵌套时用于生成选择器的插值。即使 & 它用作 Sass 表达式，它也会自动将外部选择器添加到内部选择器。 @at-rule 明确告诉 Sass 不要包含外部选择器。

风格规则：
@at-root 规则摆脱了样式规则。默认情况下仅包含 @media 之类的 at 规则。但如果需要，可以控制结果中包含什么和不包含什么。
例子：

@media geeks
  .gfg
    color: green
  
    @at-root (without: media)
      font-family: times new roman
  
  
    @at-root (with: rule)
      font-size: 4px

这将导致以下输出：

@media geeks {
  .gfg {
    color: green
  }
}
.gfg {
  font-family: times new roman
}
.gfg {
  font-size: 4px;
}

除了名称之外，查询中还可以使用其他一些特殊值：

• rule表示样式规则，这排除了所有 at 规则但保留了样式规则。
• all意味着必须排除所有 at-rules 和 style 规则。