Sass | @at-root rule

The @at-root rule emits everything inside the rule at the root of the file rather than using normal nesting. It’s mostly used during advanced nesting with the SassScript parent selector and selector functions.

Syntax:

filter_none

edit
close

play_arrow

link
brightness_4
code

@at-root <selector> { ... }

chevron_right


Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


This would result in the following output:

.block input.font {
  times new roman;
}

.block select.font {
  arial;
}

The @at-root rule is required in the above example as Sass doesn’t know about the interpolation that was used for generating the selector while performing the selector nesting. It automatically adds the outer selector to the inner selector even if & it is used as a Sass expression. Sass is explicitly told not to include the outer selector by the @at-rule.



Style Rules:
The @at-root rule gets rid of the style rules. Only the at-rules like @media are included by default. But if required, it can be controlled as what and what not is included in the results.
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


This would result in the following output:

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

Along with the names, some other special values can also be used in the queries:

  • rule means the style rules, this excludes all at-rules but preserves the style rules.
  • all means all the at-rules and style rules must be excluded.



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.