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.

@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;
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;
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
Give Us Your Feedback
If You Need Any Help!
Contact Us