Sass | @atroot rule (original) (raw)

Sass | @at-root rule

Last Updated : 15 Jul, 2025

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:

css `

@at-root { ... }

`

Example:

css `

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

css `

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