@at-root

@at-root规则通常写为@at-root <selector> { ... },并使其中的所有内容都在文档的根目录发出,而不是使用常规嵌套。在使用SassScript父选择器选择器函数进行高级嵌套时,最常用。

例如,假设您想编写一个匹配外部选择器和元素选择器的选择器。您可以编写一个像如下的mixin,它使用selector-unite()函数将&与用户的选择器组合在一起。

这里需要@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: ...)查询排除了除列出的规则之外的所有规则。

除了@规则的名称外,查询中还可以使用两个特殊的值:

  • rule指的是样式规则。例如,@at-root (with: rule)排除了所有@规则,但保留了样式规则。
  • all指的是所有at规则和样式规则都应该被排除。
上次更新: 2019-11-5 4:49:11 PM