Sass @-Rules and Directives
A list of all the rules and directives used in Sass are given below:
Let’s discuss all these rules in details:
SASS Import
CSS provides @import option that makes you able to split your CSS into smaller, more maintainable portions. The only one limitation is that each time you use @import in CSS, it creates another HTTP request.
Sass builds on top of the current CSS @import. It doesn’t need to require an HTTP request. Instead of this, it simply takes the file that you want to import and combine it with the file you’re importing into so you can serve a single CSS file to the web browser.
Suppose we have two Sass files, _header.scss and base.scss and we want to import _header.scss into base.scss.
See this Example:
While importing the file, you don’t need to include the file extension “.scss”. It will generate the following CSS file:
CSS after processing:
Sass @media Directive
@media directive sets the style rule to different media types. @media directive can be nested inside the selector SASS but it is bubbled up to the top level of the stylesheet
Create a SCSS file named “media.scss”, having the following data.
SCSS file: media.scss.
The created CSS file “media.css” contains the following code:
Sass Inheritance/ Extend
In Sass, @extend is used to share a set of CSS properties from one selector to another. It is a very important and useful feature of Sass.
The @extend feature of Sass allows classes to share a set of properties with one another. In complicated CSS where many classes are put together, duplication of properties may occurs. The @extend features makes your code less and facilitates you to rewrite it repeatedly.
Let’s take an example to demonstrate the @extend feature. Here, we create a simple series of messaging for errors, warnings and successes.
SCSS Syntax:
Equivalent Sass Syntax:
When the above code is processed, it takes the CSS properties in .message and applies them to .success, .error, & .warning. The generated CSS facilitates you to avoid writing multiple class names on HTML elements. It looks like this:
Sass @at-root Directive
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:
The above code will be compiled to the CSS file as shown below −
Sass @debug Directive
The @debug directive detects the errors and displays the SassScript expression values to the standard error output stream.
Sass @debug Directive Example
Let’s create a SCSS file named “debug.scss”, having the following data.
Now, open command prompt and run the watch command to tell SASS to watch the file and update the CSS whenever SASS file is changed.
Execute the following code: sass — watch debug.scss:debug.css
It will create a normal CSS file named “debug.css” in the same directory automatically.
Sass @warn Directive
The @warn directive is used to give cautionary advice about the problem. It displays the SassScript expression values to the standard error output stream.
There are two specific differences between @warn and @debug:
- Warning can be turned off with the — quiet command-line option or the: quiet Sass option.
- Sass @warn directive provides a printed output along with the message so that the user being warned where the warning is occurred.
Sass @warn Directive Example
Let’s create a SCSS file named “warn.scss”, having the following data.
Now, open command prompt and run the watch command to tell SASS to watch the file and update the CSS whenever SASS file is changed.
Execute the following code: sass — watch warn.scss:warn.css
It will create a normal CSS file named “warn.css” in the same directory automatically.
Sass @error Directive
The @error directive displays the SassScript expression value as fatal error.
Sass @error Directive Example
Let’s create a SCSS file named “error.scss”, having the following data.
Now, open command prompt and run the watch command to tell SASS to watch the file and update the CSS whenever SASS file is changed.
Execute the following code: sass — watch error.scss:error.css
It will create a normal CSS file named “error.css” in the same directory automatically.
In my Next article, I will discuss what are Sass Functions and how we can use them to write next level CSS.I hope you found it helpful. Happy Learning.
Thanks.