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