Sass - @-Rules and Directives

It imports the SASS or SCSS files, it directly takes the filename to import.

It sets the style rule to different media types.

@extend directive is used to share rules and relationships between selectors.

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

@debug directive detects the errors and displays the SassScript expression values to the standard error output stream.

@warn directive is used to give cautionary advice about the problem; it displays the SassScript expression values to the standard error output stream.

@error directive displays the SassScript expression value as fatal error.