萨斯|规则

At-rules 只是一些 CSS 语句，它们指示 CSS 在特定条件下如何表现。它们以“@”符号开头，后跟标识符并以分号（在 SCSS 的情况下）或下一个 CSS 语句（在 SASS 的情况下）结束，具体取决于所使用的 Sass 语法。

句法：

css

@identifier(rule);

以下是使用的 Sass at 规则列表：

• @use 一起处理来自不同 Sass 样式表的 mixin、函数和变量。它还将来自各种不同样式表的 CSS 合二为一。
• @forward处理 Sass 样式表，并使其混入、函数和变量可用于 @use 规则。
• @import扩展 CSS at-rule 以处理来自其他样式表的样式、mixin、函数和变量。
• @mixin和@include使再次使用样式部分变得容易。
• 在萨斯表达式中使用@函数定义了定制功能。
• @extend允许选择器相互接收样式。
• @at-root将样式放在 CSS 文档的根目录中。
• @error导致编译失败并显示给定的错误消息，如上例中所用。
• @warn在不完全停止编译的情况下打印警告。
• @debug打印命令用于调试目的。
• 像@if、@each、@for和@while这样的流控制规则控制样式的发射次数。

Sass 还为简单的 CSS 规则提供了某些行为，例如： @charset和@namespace。它们可以包含插值，并且可以嵌套在样式规则中。其中一些，例如@media和@supports ，即使不使用插值，也允许直接在规则本身中使用 Sass。

Sass 的许多额外功能都以这些at-rules的形式出现。

示例代码：

css

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

这将给出以下 CSS 输出：

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