Open In App

Sass | @at-root rule

Improve
Improve
Like Article
Like
Save
Share
Report

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:




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


Example:




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


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:




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


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.


Last Updated : 21 Jun, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads