样式表的结构

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

语句语句永久链接

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

SCSS 中,语句由分号分隔(如果语句使用块,则分号是可选的)。在缩进语法中,它们仅由 换行符分隔。

通用语句通用语句永久链接

这些类型的语句可以在 Sass 样式表的任何位置使用

CSS 语句CSS 语句永久链接

这些语句生成 CSS。它们可以在 @function 之外任何位置使用

顶级语句顶级语句永久链接

这些语句只能在样式表的顶级使用,或嵌套在顶级CSS 语句中 

其他语句其他语句永久链接

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

表达式表达式永久链接

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

字面量字面量永久链接

最简单的表达式只表示静态 

  • 数字,可以带单位,也可以不带单位,例如 12100px
  • 字符串,可以带引号,也可以不带引号,例如 "Helvetica Neue"bold
  • 颜色,可以通过它们的十六进制表示或名称来引用,例如 #c6538cblue
  • 布尔 字面量 truefalse
  • 单例 null
  • 值列表,可以用空格或逗号分隔,也可以用方括号或根本不加括号括起来,例如 1.5em 1em 0 2emHelvetica, Arial, sans-serif[col1-start]
  • 映射将值与键关联,例如 ("background": red, "foreground": pink)

运算运算永久链接

Sass 定义了用于许多 运算的语法

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

其他表达式其他表达式永久链接

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