Definition of SASS at-root
The @at-root directive is a set of nested rules that can render the style block at the document’s root. Sometimes when we create styles for a component in js, we usually add all variant classes at the root level and then use it to modify all the elements in the component in js. This can get more complex using sass if we want to nest our styles inside a namespace.
Furthermore, we will have to interpolate the selector to process it. It is when @at-root begins to play. The @at-root will move and restart the selector out of its initial nesting scope, enabling us to add the variant selector to the parent.
Syntax of SASS @at-root
The syntax for @at-root directive can be written as:
@at-root <selector> {
...
…
//code to be executed
}As shown in the above syntax, it allows everything within the document to be emitted at the root rather than using regular nesting. The @at-root can be written as @at-root {… } To just have numerous rules of style within its scope to place them all at the root of the document.
For instance:
div{
font-size: 10px;
color: red;
@at-root .my_atroot_demo {
background-color: grey;
}
}When you compile the above scss file, you will have the below CSS code:
div{
font-size: 10px;
color: red;
}
. my_atroot_demo {
background-color: grey;
}How @at-root directive Works in SASS?
This is most commonly used for the SassScript parent selector and selector functions while doing some advanced nesting. It assists with selector functions while implementing enhanced nesting. The @at-root directive could be worked as a single selector inline or even as a block with several selectors.
For inline, it works as:
.parent_element {
...
…
@at-root .child {
//code for styling the elements
}
}For a block with multiple selectors, it works as:
.parent_element {
...
…
@at-root {
.child_element1 {
//code for styling the elements
}
.child_element2 {
//code for styling the elements
}
}
}Examples to Implement @at-root directive in SASS
Let’s create an example to make use of the @at-root directive in SASS. Here, we have created an HTML file called example1.html with the below code:
Example #1
Code:
<html>
<head>
<title> SASS @at-root Directive Example </title>
<link rel = "stylesheet" type = "text/css" href = "sass_atroot.css"/>
</head>
<body>
<h1> Hello World...Welocme to EDUCBA!!!!. </h1>
<h2> It is a leading global provider of skill based education. It is an online learning model along with amazing 2500+ courses prepared by top-notch professionals. </h2>
</body>
</html>Now create a file called sass_atroot.scss with the below code:
sass_atroot.scss
h1 {
color: #A52A2A;
background-color: #DEB887;
@at-root {
h2{
font-size: 22px;
font-style: italic;
color: #1E90FF;
}
}
}Now open the command prompt and run the below command to watch the file and communicates it to SASS and updates the CSS file every time SASS file changes.
sass –watch sass_atroot.scss: sass_atroot.cssNow, execute the file with the above command and it will create the sass_atroot.css file with the below code:
sass_atroot.css
h1 {
color: #A52A2A;
background-color: #DEB887;
}
h2 {
font-size: 22px;
font-style: italic;
color: #1E90FF;
}Output:
- Save the above-given html code in html file.
- Now open the above HTML file in a browser, and you will see the below output as shown in the displayed image.
Example #2
Create an HTML file called example2.html with the below code:
Code:
<html>
<head>
<title> SASS @at-root Directive Example </title>
<link rel = "stylesheet" type = "text/css" href = "sass_atroot1.css"/>
</head>
<body>
<div class="myclass"> EDUCBA... </div>
</body>
</html>Now create a file called sass_atroot1.scss with the below code:
sass_atroot1.scss
.myclass {
background-color: grey;
height: 100px;
margin: 50px;
width: 100px;
@at-root {
@keyframes fade {
from { transform: scale(1.5); }
to { transform: scale(1.0); }
}
}
&:hover {
animation: fade 5s infinite;
}
}Execute the file with the above command shown in the previous example and it will create the sass_atroot1.css file with the below code:
sass_atroot1.css
.myclass {
background-color: grey;
height: 100px;
margin: 50px;
width: 100px;
}
@keyframes fade {
from {
transform: scale(1.5);
}
to {
transform: scale(1);
}
}
.myclass:hover {
animation: fade 5s infinite;
}Output
- Save the above-given html code in html file.
- Now open the above HTML file in a browser, and you will see the below output as shown in the displayed image.
When you hover an element, it moves from scale 1.5 to scale 1. The animation effect will last for 5 seconds. This effect will then start over again, and go on forever (infinite).
Example #3
Create an HTML file called example3.html with the below code:
Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title> SASS @at-root Directive Example </title>
<link rel="stylesheet" type="text/css" href="sass_atroot2.css"/>
</head>
<body>
<h1> Hello World...</h1>
<div class="styledemo">
<h2> Welcome to EDUCBA... !!! </h2>
<p>Educba is online teaching providing server which helps various stream people or candidates to upgrade their knowledge respective to their domain.</p>
</div>
</body>
</html>Now create a file called sass_atroot2.scss with the below code:
sass_atroot2.scss
h1 {
color: #ff8000;
@at-root {
h2{
color: #A52A2A;
background-color: #DEB887;
}
p{
font-size: 25px;
font-style: italic;
color: #666600;
}
}
}Execute the file with the above command shown in the previous example and it will create the sass_atroot2.css file with the below code:
sass_atroot2.css
h1 {
color: #ff8000;
}
h2 {
color: #A52A2A;
background-color: #DEB887;
}
p {
font-size: 25px;
font-style: italic;
color: #666600;
}Output
- Save the above-given html code in html file.
- Now open the above HTML file in a browser, and you will see the below output as shown in the displayed image.
Conclusion
In this article, we have covered the concept of a @at-root directive in SASS in detail along with some examples which make the work easier. The obvious uses for @at-root are pretty limited but the control that this directive provides is beneficial in specific edge cases.
Nesting is probably most often used to create more specific selectors. Using the @at-root directive, allows you to keep styles grouped without creating more specificity than you need. For any selector, we could use this @at-rule directive to compile them in the stylesheet as root selector, but not as a nested selector.
Recommended Articles
This is a guide to SASS @at-root. Here we also discuss the definition and how @at-root directive works in sass? along with different examples and code implementation. You may also have a look at the following articles to learn more –
