Open In App

Sass | At-rules

Improve
Improve
Like Article
Like
Save
Share
Report

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;
}

Last Updated : 13 Jul, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads