Sass 扩展了 CSS，增加了几个强大的 @-规则（也称为指令），提供了控制流、模块化和代码复用功能。一些 Sass @-规则模仿了标准的 CSS @-规则，但增加了额外功能。
| 指令 (Directive) | 描述 (Description) |
|---|
@use | 推荐。 加载另一个 Sass 文件（module/partial），并使其变量、函数和 mixins 可用，通常在命名空间下。防止全局作用域污染，并清晰定义依赖关系。示例：@use 'variables'; .element { color: variables.$primary-color; } 或 @use 'variables' as vars; .element { color: vars.$primary-color; } |
@forward | 推荐。 将另一个模块的成员暴露给 @use 当前模块的样式表。作用类似于重新导出，对于组织库或组件文件夹很有用。可以有选择地显示/隐藏成员。示例：@forward 'variables' show $primary-color; |
@import | 遗留/不推荐。 历史上用于包含 partials。全局导入所有内容，可能导致命名冲突。与新的模块系统（@use/@forward）配合不佳。在现代 Sass 中应替换为 @use。 |
| 指令 (Directive) | 描述 (Description) |
|---|
@mixin | 定义一个可复用的样式块。可以接受参数和内容块（@content）。 |
@include | 将由 @mixin 定义的样式包含到当前上下文。向 mixin 传递参数。 |
@extend | 允许一个选择器继承另一个选择器的样式。在输出 CSS 中将选择器分组。使用时需谨慎，与占位符选择器（%placeholder）配合通常效果最佳。 |
@function | 定义一个执行计算或逻辑并返回单个 SassScript 值的自定义函数。 |
| 指令 (Directive) | 描述 (Description) |
|---|
@if/@else if/@else | 根据 SassScript 表达式的评估结果有条件地输出样式。示例：@if $theme == dark { color: white; } @else { color: black; } |
@for | 使用计数器在循环中重复输出样式。示例：@for $i from 1 through 3 { .item-#{$i} { width: $i * 100px; } } |
@each | 遍历列表中的项或 map 中的键/值对，为每个项输出样式。示例：@each $color in red, green, blue { .bg-#{$color} { background-color: $color; } } |
@while | 只要条件评估为 true，就重复输出样式。不如 @for 或 @each 常用。 |
| 指令 (Directive) | 描述 (Description) |
|---|
@debug | 在编译期间将 SassScript 表达式的值打印到终端。用于检查变量值或计算结果。示例：@debug $my-variable; |
@warn | 向终端打印警告消息，包含 SassScript 表达式的值，但不停止编译。用于提醒用户潜在问题或已弃用用法。示例：@warn "Mixin 'old-mixin' is deprecated. Use 'new-mixin' instead."; |
@error | 打印错误消息，包含 SassScript 表达式的值，并立即停止编译。用于致命错误或无效输入。示例：@if $value < 0 { @error "Value cannot be negative: #{$value}"; } |
Sass 完全支持并增强了标准的 CSS @-规则：
| 指令 (Directive) | Sass 增强 (Sass Enhancement) |
|---|
@media | 可以嵌套在 CSS 规则内。Sass 会将它们正确地向上冒泡到顶层。允许在查询定义中使用 SassScript（变量、函数）。示例：a { color: blue; @media (min-width: $tablet) { color: green; } } |
@supports | 可以像 @media 一样嵌套。允许在查询中使用 SassScript。 |
@keyframes | 允许嵌套和 SassScript。 |
@font-face | 支持标准的 CSS。 |
@charset | Sass 自动处理字符编码（默认为 UTF-8）。如果需要，会添加 @charset 声明，但通常不需要手动编写，除非指定非 UTF-8 编码。 |
@property (CSS Houdini) | 输出时支持标准的 CSS。 |
| 指令 (Directive) | 描述 (Description) |
|---|
@at-root | 导致嵌套规则被输出到文档的根部，而不是嵌套在其父选择器下。对于特定的 BEM 模式或跳出嵌套上下文很有用。示例：.parent { @at-root .child { color: red; } } 输出 .child { color: red; } |