Sass extends CSS with several powerful @-rules (also called directives) that provide control flow, modularity, and code reuse capabilities. Some Sass @-rules mirror standard CSS @-rules but with added functionality.
| Directive | Description |
|---|
@use | Recommended. Loads another Sass file (module/partial) and makes its variables, functions, and mixins available, typically under a namespace. Prevents global scope pollution and clearly defines dependencies. Example: @use 'variables'; .element { color: variables.$primary-color; } or @use 'variables' as vars; .element { color: vars.$primary-color; } |
@forward | Recommended. Makes another module’s members available to stylesheets that @use the current module. Acts like a re-export, useful for organizing libraries or component folders. Can selectively show/hide members. Example: @forward 'variables' show $primary-color; |
@import | Legacy/Discouraged. Historically used to include partials. Imports everything globally, potentially causing naming conflicts. Does not work well with the newer module system (@use/@forward). Should be replaced with @use in modern Sass. |
| Directive | Description |
|---|
@mixin | Defines a reusable block of styles. Can accept arguments and content blocks (@content). |
@include | Includes styles defined by a @mixin into the current context. Passes arguments to the mixin. |
@extend | Allows a selector to inherit the styles of another selector. Groups selectors in the output CSS. Use with caution, often best with placeholder selectors (%placeholder). |
@function | Defines a custom function that performs calculations or logic and returns a single SassScript value. |
| Directive | Description |
|---|
@if/@else if/@else | Outputs styles conditionally based on the evaluation of a SassScript expression. Example: @if $theme == dark { color: white; } @else { color: black; } |
@for | Outputs styles repeatedly in a loop, using a counter. Example: @for $i from 1 through 3 { .item-#{$i} { width: $i * 100px; } } |
@each | Iterates over items in a list or keys/values in a map, outputting styles for each item. Example: @each $color in red, green, blue { .bg-#{$color} { background-color: $color; } } |
@while | Outputs styles repeatedly as long as a condition evaluates to true. Less common than @for or @each. |
| Directive | Description |
|---|
@debug | Prints the value of a SassScript expression to the terminal during compilation. Useful for inspecting variable values or calculation results. Example: @debug $my-variable; |
@warn | Prints a warning message to the terminal, including the value of a SassScript expression, without stopping compilation. Useful for alerting users about potential issues or deprecated usage. Example: @warn "Mixin 'old-mixin' is deprecated. Use 'new-mixin' instead."; |
@error | Prints an error message, including the value of a SassScript expression, and stops compilation immediately. Use for fatal errors or invalid input. Example: @if $value < 0 { @error "Value cannot be negative: #{$value}"; } |
Sass fully supports and enhances standard CSS @-rules:
| Directive | Sass Enhancement |
|---|
@media | Can be nested within CSS rules. Sass will bubble them up to the top level correctly. Allows SassScript (variables, functions) inside the query definition. Example: a { color: blue; @media (min-width: $tablet) { color: green; } } |
@supports | Can be nested similarly to @media. Allows SassScript inside the query. |
@keyframes | Allows nesting and SassScript. |
@font-face | Supported as standard CSS. |
@charset | Sass handles character encoding automatically (defaults to UTF-8). @charset declaration is added if needed, but usually not required to be written manually unless specifying a non-UTF-8 encoding. |
@property (CSS Houdini) | Supported as standard CSS when outputting. |
| Directive | Description |
|---|
@at-root | Causes nested rules to be emitted at the root of the document instead of being nested under their parent selectors. Useful for specific BEM patterns or escaping nesting contexts. Example: .parent { @at-root .child { color: red; } } outputs .child { color: red; } |
