样式表的结构

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

语句

Sass 样式表由一系列语句组成，这些语句被评估以构建生成的CSS。一些语句可能有块，使用{}定义，其中包含其他语句。例如，样式规则是带有块的语句。该块包含其他语句，例如属性声明。

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

通用语句

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

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

CSS 语句

这些语句产生CSS。它们可以在除@function之外的任何地方使用：

• 风格规则，例如h1{/*...*/}。
• CSS 规则，如@media和@font-face。
• Mixin 使用@include。
• @at-root规则。_。

顶级语句

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

• 模块加载，使用@use。
• 导入，使用@import。
• 使用@mixin。
• 函数定义使用@function。

其他声明

• 像这样的属性声明width: 100px只能在样式规则和一些 CSS 规则中使用。
• 该@extend规则只能在样式规则中使用。

表达式

表达式是位于属性或变量声明右侧的任何内容。每个表达式产生一个值。任何有效的CSS属性值也是一个 SASS 表达式，但 SASS 表达式比普通的CSS值强大得多。它们作为参数传递给mixins 和函数，用于使用@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，具有通常的布尔行为。
• +、-、/，可用于连接字符串。
• ()，用于显式控制操作的优先顺序。

其他表达式

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

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com