样式表的结构

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

语句语句永久链接

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

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

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

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

CSS 语句CSS 语句永久链接

这些语句会生成 CSS。它们可以在除 @function 内部的任何地方使用

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

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

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

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

表达式表达式永久链接

表达式是指在属性或变量声明的右侧出现的任何内容。每个表达式都会生成一个。任何有效的 CSS 属性值也是 Sass 表达式,但 Sass 表达式比简单的 CSS 值强大得多。它们作为参数传递给mixin函数,用于使用@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 具有通常的布尔行为。除了 falsenull 之外,Sass 认为所有值都为“true”。
  • +-/ 可用于连接字符串。
  • () 可用于明确控制运算符的优先级顺序。

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

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