@at-root
该@at-root<selector>{...}
,并导致其中的所有内容都在文档的根部发出,而不是使用正常的嵌套。它最常用于使用 SassScript 父选择器和选择器函数进行高级嵌套时。
例如,假设您要编写一个匹配外部选择器和元素选择器的选择器。您可以编写一个像这样的 mixin,它使用&
用户的选择器相结合。
scss 语句 | css 语句 |
---|---|
@use "sass:selector"; @mixin unify-parent($child) { @at-root #{selector.unify(&, $child)} { @content; } } .wrapper .field { @include unify-parent("input") { /* ... */ } @include unify-parent("select") { /* ... */ } } | .wrapper input.field { /* ... */ } .wrapper select.field { /* ... */ } |
该&
作 SassScript 表达式,它也会自动将外部选择器添加到内部选择器。
@at-root 还可以编写规则以将@at-root{...}
多个样式规则放在文档的根部。其实@at-root<selector>{...}
,只是一个简写@at-root@at-root{<selector>{...}}
!
超越风格规则
就其本身@at-root(with:<rules...>){...}
或@at-root(without:<rules...>){...}.(without:...)
,查询告诉 Sass ,应该排除哪些规则;(with:...)。查询排除除列出的规则之外的所有规则。
scss 语句 | css 语句 |
---|---|
@media print { .page { width: 8in; | @media print { .page { width: 8in; } } .page { color: #111; } .page { font-size: 1.2em; } |
除了 at-rules 的名称之外,还有两个可以在查询中使用的特殊值:
- rule指风格规则。例如,@at-root(with: rule)排除所有 at 规则但保留样式规则。
- all指应排除所有 at-rules 和 style 规则。