’@规则’

Sass 的许多额外功能都以新 at 规则 的形式出现,它添加在 CSS 之上:

  • @use 从其他 Sass 样式表加载 mixins、函数和变量,并将多个样式表中的 CSS 组合在一起。

    ¥@use loads mixins, functions, and variables from other Sass stylesheets, and combines CSS from multiple stylesheets together.

  • @forward 加载 Sass 样式表,并在使用 @use 规则加载样式表时使其 mixins、函数和变量可用。

    ¥@forward loads a Sass stylesheet and makes its mixins, functions, and variables available when your stylesheet is loaded with the @use rule.

  • @import 扩展了 CSS at 规则以从其他样式表加载样式、mixins、函数和变量。

    ¥@import extends the CSS at-rule to load styles, mixins, functions, and variables from other stylesheets.

  • @mixin@include 可以轻松地重复使用样式块。

    ¥@mixin and @include makes it easy to re-use chunks of styles.

  • @function 定义了可在 SassScript 表达式 中使用的自定义函数。

    ¥@function defines custom functions that can be used in SassScript expressions.

  • @extend 允许选择器相互继承样式。

    ¥@extend allows selectors to inherit styles from one another.

  • @at-root 将样式放入 CSS 文档的根目录中。

    ¥@at-root puts styles within it at the root of the CSS document.

  • @error 导致编译失败并显示错误消息。

    ¥@error causes compilation to fail with an error message.

  • @warn 在不完全停止编译的情况下打印警告。

    ¥@warn prints a warning without stopping compilation entirely.

  • @debug 打印一条消息用于调试目的。

    ¥@debug prints a message for debugging purposes.

  • 诸如 @if@each@for@while 之类的流量控制规则控制是否发出样式或发出多少次样式。

    ¥Flow control rules like @if, @each, @for, and @while control whether or how many times styles are emitted.

Sass 对于 CSS at 规则 也有一些特殊行为:它们可以包含 插值法,并且可以嵌套在样式规则中。其中一些,如 @media@supports,还允许 SassScript 直接在规则本身中使用,无需插值。

¥Sass also has some special behavior for plain CSS at-rules: they can contain interpolation, and they can be nested in style rules. Some of them, like @media and @supports, also allow SassScript to be used directly in the rule itself without interpolation.