Sass - At-root Directives

Description

The @at-root directive is a collection of nested rules which is able to make the style block at root of the document.

@at-root (without: ...) and @at-root (with: ...)

@at-root selector excludes the selector by default. By using @at-root, we can move the style outside of nested directive.

For instance, create one SASS file with the following code −

@media print {
   .style {
      height: 8px;
      @at-root (without: media) {
         color: #808000;;
      }
   }
}

The above code will be compiled to the CSS file as shown below −

@media print {
   .style {
      height: 8px;
   }
}

.style {
   color: #808000;
}

Example

The following example demonstrates the use of @at-root in the SCSS file −

atroot.htm

<!doctype html>
   <head>
      <title>At-root Example</title>
      <link rel = "stylesheet" href = "atroot.css" type = "text/css" />
   </head>

   <body class = "container">
      <h2>Example using at-root</h2>
      <p class = "style">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
   </body>
</html>

Next, create file atroot.scss.

atroot.scss

h2 {
   color: #808000;
   background-color: #DB7093;

   @at-root {
      .style{
         font-size: 20px;
         font-style: bold;
         color: #B8860B;
      }
   }
}

You can tell SASS to watch the file and update the CSS whenever SASS file changes, by using the following command −

sass --watch C:\ruby\lib\sass\atroot.scss:atroot.css

Next, execute the above command; it will create the atroot.css file automatically with the following code −

atroot.css

h2 {
   color: #808000;
   background-color: #DB7093;
}
.style {
   font-size: 20px;
   font-style: bold;
   color: #B8860B;
}

Output

Let us carry out the following steps to see how the above given code works −

Save the above given html code in atroot.html file.
Open this HTML file in a browser, an output is displayed as shown below.

sass_rules_and_directives.htm