SASS @at-root At-rule

SASS/SCSS @at-root at-rule is not frequently used in SASS or SCSS but it helps while implementing advanced nesting with selector functions. We can use this at-rule with any selector(generally the nested selectors defined inside curly braces of another selector) to compile them as root selector in the stylesheet and not as a nested selector.

It emits everything within it at the root of the document instead of using normal nesting.

Let's see the syntax for this and then we will take an example to help you understand this.

SASS @at-root at-rule: Syntax

Following is the syntax for it,

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

We can write the @at-root as @at-root { ... } to have multiple style rules in its scope to put all of them at the root of the document.

In fact, @at-root <selector> { ... } is just a shorthand for @at-root { <selector> { ... } }

SASS @at-root: Example

Let's look at an example to understand this better.

div{
    margin: 0px;
    @at-root .column {
        background-color: black;
    }
}

After compiling the CSS will look like this:

div{
    margin: 0px;
}

.column{
    background-color: black;
}

Suppose if we remove the @at-root from the above SCSS i.e.

div{
    margin: 0px;
    
    .column{
        background-color: black;
    }
}

Now the generated CSS will look as shown below:

div{
    margin: 0px;
}
 
div .column{
    background-color: black;
}

So this was all about SASS/SCSS @at-root at-rule.