Menu

Understanding SASS Rules

SASS @Rules(At-Rules)

The SASS At-Rules or @ rules provide most of the extra functionality which SASS provides like defining functions and then using them, using loop in your CSS, flow control and a lot more.

There are different types of At-rules which have a prefix @ where each of the At-rules available in SASS is having a special purpose which makes it even more interesting and easier to code complex styling rules.

If you want to define a function, or use conditional statements or use a loop in your styling code or if you simply wish to debug the styling code, using these @ rules we can easily do all this, as there are specific @ rules available in SASS to provide all these features.

Following are the @ rules available in Sass:

  1. @use
  2. @forward
  3. @import
  4. @mixin and @include
  5. @function
  6. @if, @else and @elseif
  7. @for
  8. @each
  9. @while
  10. @extend
  11. @at-root
  12. @error
  13. @warn
  14. @debug
  15. @media

We will be covering all these @ rules of Sass with code examples in the upcoming tutorials.