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:

@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.

Article Tags :

CSS

Web Technologies

SASS