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:

filter_none

edit
close

play_arrow

link
brightness_4
code

@identifier(rule);

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

.error
  border: 1px green
  background-color: black
  
  &--serious
    @extend .error
    border-width: 3px

chevron_right


This would give the following CSS output:

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

full-stack-img

My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.