Sass | At-rules

At-rules are simply some CSS statements that instructs the CSS how to behave in particular conditions. They start with an “@” sign, followed by an identifier and ends with a semicolon (in case of SCSS), or the next CSS statement (in case of SASS), depending upon the Sass syntax used. 

Syntax:

css

@identifier(rule);

Below is this list of Sass at-rules that are used:

• @use processes the mixins, functions, and variables from different Sass stylesheets together. It also combines CSS from various different stylesheets into one.
• @forward processes a Sass stylesheet and makes its mixins, functions, and variables available for use with the @use rule.
• @import expands the CSS at-rule to process styles, mixins, functions, and variables from other stylesheets.
• @mixin and @include makes it easy to use the sections of styles again.
• @function defines the custom functions to be used in Sass expressions.
• @extend allows selectors to receive styles from one another.
• @at-root puts styles in it to the root of the CSS document.
• @error causes compilation to fail with a given error message, as used in the above example.
• @warn prints the warning without completely stopping the compilation.
• @debug prints the command for debugging purposes.
• Flow control rules like @if, @each, @for, and @while control the number of emissions of styles.

Sass also provides certain behavior for simple CSS at-rules like: @charset and @namespace. They can contain interpolation, and they can be nested in the style rules. Some of them, like @media and @supports, also allows Sass to be used directly in the rules itself even without using interpolation.

A lot of Sass’s extra functionality comes in the forms of these at-rules.

Example code:

css

.error
  border: 1px green
  background-color: black

  &--serious
    @extend .error
    border-width: 3px

This would give the following CSS output:

.error, .error--serious {
  border: 1px green;
  background-color: black;
}
.error--serious {
  border-width: 3px;
}