样式表结构

与 CSS 一样，大多数 Sass 样式表主要由包含属性声明的样式规则组成。但 Sass 样式表有更多可以与这些并存的功能。

语句

一个 Sass 样式表由一系列 语句 组成，这些语句按顺序被评估以构建最终的 CSS。有些语句可能有 代码块，由 { 和 } 定义，其中包含其他语句。例如，样式规则就是一个带有代码块的语句。该代码块包含其他语句，如属性声明。

在 SCSS 中，语句由分号分隔（如果语句使用代码块，则分号是可选的）。在缩进语法中，它们仅由换行符分隔。

通用语句

这些类型的语句可以在 Sass 样式表中的任何地方使用：

• 变量声明，如 $var: value。
• 流控制 at-rules，如 @if 和 @each。
• @error、@warn 和 @debug 规则。

CSS 语句

这些语句产生 CSS。它们可以在任何地方使用，除了 @function 内部：

• 样式规则，如 *h1 { / ... */ }**。
• CSS at-rules，如 @media 和 @font-face。
• 使用 @include 的混合宏调用。
• @at-root 规则。

顶层语句

这些语句只能在样式表的顶层使用，或者嵌套在顶层的一个 CSS 语句中：

• 使用 @use 的模块加载。
• 使用 @import 的导入。
• 使用 @mixin 的混合宏定义。
• 使用 @function 的函数定义。

其他语句

• 属性声明，如 width: 100px，只能在样式规则和一些 CSS at-rules 中使用。
• @extend 规则只能在样式规则中使用。

表达式

表达式是任何出现在属性或变量声明右侧的内容。每个表达式都会产生一个值。任何有效的 CSS 属性值也是一个 Sass 表达式，但 Sass 表达式比纯 CSS 值强大得多。它们作为参数传递给混合宏和函数，用于 @if 规则的控制流，并使用算术运算进行操作。我们将 Sass 的表达式语法称为 SassScript。

字面量

最简单的表达式只代表静态值：

• 数字，可能有也可能没有单位，如 12 或 100px。
• 字符串，可能有也可能没有引号，如 "Helvetica Neue" 或 bold。
• 颜色，可以通过十六进制表示或名称来引用，如 #c6538c 或 blue。
• 布尔字面量 true 或 false。
• 单例 null。
• 值列表，可以用空格或逗号分隔，可以包含在方括号内或不使用方括号，如 1.5em 1em 0 2em、Helvetica, Arial, sans-serif 或 col1-start。
• 映射，将值与键关联，如 ("background": red, "foreground": pink)。

运算

Sass 定义了许多运算的语法：

• == 和 != 用于检查两个值是否相同。
• +、-、* 、/ 和 % 对于数字具有其通常的数学意义，对于单位则有特殊的行为，这与科学数学中单位的使用相匹配。
• <、<=、> 和 >= 检查两个数字是否大于或小于另一个。
• and、or 和 not 具有通常的布尔行为。Sass 认为除了 false 和 null 之外的所有值都是“真”。
• +、- 和 / 可用于连接字符串。
• **( **和 ) 可用于明确控制运算的优先级顺序。

其他表达式

• 变量，如 $var。
• 函数调用，如 nth($list, 1) 或 var(--main-bg-color)，它们可以调用 Sass 核心库函数或用户定义的函数，也可以直接编译为 CSS。
• 特殊函数，如 calc(1px + 100%) 或 **url(http://myapp.com/assets/logo.png)**，它们有自己独特的解析规则。
• 父选择器 &。
• 值 !important，它被解析为一个无引号的字符串。