1. What are SASS AT Rules or Directives?
While writing SASS programs, it requires a comprehensive and in-depth knowledge of its all tools. SASS at-rules are the keys to enhance the functionality of SCSS script also known as @-directives. These @-rules basically impart some extra controls to the programmer and increase flexibility of SASS programming.
In order to write a good SCSS script, SASS at-rules or directives are very useful, and play a vital role in writing style rules. Below is the list of all the SASS @-rules which can be utilized to create awesome stylesheets.
Below is the list of all the @-rules or directives which allow the developers to access more functionality of SCSS programming.
1.1. @at-root Rule
This at-rule or directive sends the style rule at the bottom of the current stylesheet.
USAGE: @at-root some-selector{ ... }
1.2. @debug Directive
SASS @debug rule is helpful while debugging purposes and prints the value of expression along with file-name and line-number.
USAGE: @debug some-expression
1.3. @error Rule
In order to check the appropriate outcomes of the SASS functions, the @error rules or directives come handy.
USAGE: @error some-expression
1.4. @extend Directive
This @extend rule inherits styles from the other SASS selectors.
USAGE: @extend some-selector
1.5. @forward Rule
When we load a file with the @use rule, the @forward rule loads its functions, mixins, and variables available for the current stylesheet.
USAGE: @forward (sournce)
1.6. @function Directive
Define complex operations and functions that you can reuse in all of your stylesheet.
USAGE: @function name(arguments) {...}
1.6.1. @return Rule
In order to yield the results from a function, we have to incorporate the @return directive as both of these at-rules are compulsory for each other in SASS programming.
USAGE:
@function function-name{
@return $variable name;
}
1.7. @import Directive
The @import rule loads functions and styles from other stylesheets. It works in a similar way just like we import stylesheets in CSS programming.
USAGE: @import path or reference
1.8. @mixin Rule
It adds the ability to reuse the pre defined style rules.
USAGE: @mixin name (arguments){...}
1.8.1. @include Directive
In order to utilize the defined mixin, we need to include it at the desired location with the help of the SASS @include directive. The @include and @mixin directives only work with each other. If either of these is missing, there will be no output for that particular mixin.
USAGE: @include mixin-name; or USAGE: @include mixin-name(arguments);
1.8.2. @content Rule
There is another at-rule in SASS which is enclosed with the mixin definition known as the @content directive or content block. It can further include the block of syles to be nested within the current SASS mixin.
USAGE: @content; or USAGE: @content(arguments);
1.9. @use Directive
This is a widely used SASS directive and it helps in combining CSS from many stylesheets. Also, it loads @mixin, functions, and variables from other SCSS stylesheets.
USAGE: @use some-expression
1.10. @warn Rule
@warn display only the warning message but do not stop compilation.
USAGE: @warn some-expression