mirror of
https://github.com/danog/sass-site.git
synced 2024-12-13 18:07:35 +01:00
029520349a
This hierarchy is now going to document built-in modules, which mostly contain functions but can also contain mixins and may potentially contain variables in the future.
75 lines
2.5 KiB
Plaintext
75 lines
2.5 KiB
Plaintext
---
|
|
title: "@at-root"
|
|
introduction: >
|
|
The `@at-root` rule is usually written `@at-root <selector> { ... }` and
|
|
causes everything within it to be emitted at the root of the document instead
|
|
of using the normal nesting. It's most often used when doing [advanced
|
|
nesting](../style-rules/parent-selector#advanced-nesting) with the [SassScript
|
|
parent selector](../style-rules/parent-selector#in-sassscript) and [selector
|
|
functions](../modules/selector).
|
|
---
|
|
|
|
<%= partial 'code-snippets/example-advanced-nesting' %>
|
|
|
|
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 do %>
|
|
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> { ... } }`!
|
|
<% end %>
|
|
|
|
## Beyond Style Rules
|
|
|
|
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 includes 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.
|
|
|
|
[style rules]: ../style-rules
|
|
[`@media`]: css#media
|
|
[`@supports`]: css#supports
|
|
[media query features]: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Targeting_media_features
|
|
|
|
<% example do %>
|
|
@media print {
|
|
.page {
|
|
width: 8in;
|
|
|
|
@at-root (without: media) {
|
|
color: #111;
|
|
}
|
|
|
|
@at-root (with: rule) {
|
|
font-size: 1.2em;
|
|
}
|
|
}
|
|
}
|
|
===
|
|
@media print
|
|
.page
|
|
width: 8in
|
|
|
|
@at-root (without: media)
|
|
color: #111
|
|
|
|
|
|
@at-root (with: rule)
|
|
font-size: 1.2em
|
|
<% end %>
|
|
|
|
In addition to the names of at-rules, there are two special values that can be
|
|
used in queries:
|
|
|
|
* `rule` refers to style rules. For example, `@at-root (with: rule)` excludes
|
|
all at-rules but preserves style rules.
|
|
|
|
* `all` refers to all at-rules *and* style rules should be excluded.
|