×
Sass Part 2 – @-Rules and Directives


Sass Part 2 – @-Rules and Directives

December 25, 2019

This is the second part of our Sass series, aimed at providing a better understanding of  Sass  @-rules and Directives. Part 1 of the series provided an introduction and taught by example about variables and nesting in Sass.

 

WHAT YOU WILL LEARN

  • @-rules and Directives
  • 11 Directives

@-rules of CSS 

CSS provides statements called @rules which are rule statements preceded by an @symbol. Most commonly used @rules are @media,@keyframes,@import, etc

Sass extends some of these  @rules and provides other directives as well.

“A directive is something that introduces new syntax. Sass directives help in writing CSS in an easy and better way”

There are 7 @rules and directives you can use in Sass. They are as follows

@import

@media

@extend

@debug

@warn

@error

@at-root

@forward

@use

@mixin and @function

 

 

 

@-Rules and Directives

@import directives – @import directive is used to import Sass files (SCSS/SASS) into one another. Using the @import directive while properly modularizing the application can improve code reusability and avoid repeats.

Consider two scss files

_sectionone.scss

_sectiontwo.scss

These have styles for two sections and these scss files are called partials.  _ is what sass uses to identify a partial file. These partial files can be imported into the main SCSS file using

Multiple SASS files can be imported at once using a comma. Files without an underscore at the beginning can also be imported.

Partials in Sass are files used in modularizing the application. Partial files contain CSS snippets that can be imported inside other SCSS files so that the code becomes more modularized and a repeat of code is avoided.

@media Directive – @media is similar to CSS media rules and it can be nested inside CSS rules.

@extend Directive  – @extend directive is used to extend the styling rules of one element into another element.

read more on @extend directive here  https://sass-lang.com/documentation/at-rules/extend

TRY IT OUT

 

@debug,@error, and @warn – @debug  will detect the errors and display the Sass expression value to the standard output error stream.@error will detect the error and display the error and @warn will display a cautionary warning to the standard output stream.

@warn – https://sass-lang.com/documentation/at-rules/warn

@error – https://sass-lang.com/documentation/at-rules/error

@debug – https://sass-lang.com/documentation/at-rules/debug

we will learn why we need them and how to use them in the coming parts of the series when we learn more about mixins and functions.

 

@at-root Directive – @at-root directive is used to add style rules to the root of the document. In the following example, the rule for the footer will be moved to the document root.

Learn more about @at-root directive

https://sass-lang.com/documentation/at-rules/at-root

TRY IT OUT

 

@use and @forward-@use loads other sass modules which has functions, mixins and variables into the current module.@use is also used to load sass’s inbuilt modules.@ forward makes the functions,mixins or variables of a sass modules loadable using @use.

https://sass-lang.com/documentation/at-rules/use

https://sass-lang.com/documentation/at-rules/forward

 

@mixin and @function- @mixin and @function are used to create mixins and functions respectively. We will learn more about them in upcoming parts of this series.

Note: Code snippets given here are just examples to show how the  Sass features work.

 

 

WHAT YOU LEARNED

  • @-rules and Directives
  • 9 Directives(@import,@media,@extend,@debug,@warn,@error,@at-root,@forward,@use)

The next part of this series will cover in detail about Sass control directives

 

No Comments

Leave a Reply

Your email address will not be published. Required fields are marked *