Skip to content
Related Articles

Related Articles

Sass | At-rules
  • Last Updated : 24 Jun, 2020
GeeksforGeeks - Summer Carnival Banner

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. 



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 recieve 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:

  border: 1px green
  background-color: black
    @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;


My Personal Notes arrow_drop_up
Recommended Articles
Page :