- Sass Tutorial
- Sass - Home
- Sass - Overview
- Sass - Installation
- Sass - Syntax
- Using Sass
- Sass - CSS Extensions
- Sass - Comments
- Sass - Script
- Sass - @-Rules and Directives
- Control Directives & Expressions
- Sass - Mixin Directives
- Sass - Function Directives
- Sass - Output Style
- Extending Sass
- Sass Useful Resources
- Sass - Interview Questions
- Sass - Quick Guide
- Sass - Useful Resources
- Sass - Discussion
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.
To Continue Learning Please Login
Login with Google