样式表的结构 Structure of a Stylesheet

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

声明

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

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

通用语句

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

CSS 语句

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

顶级声明

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

其他声明

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

表达式

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

文字

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

  • 数字,可能有也可能没有单位,例如“12”或“100px”。
  • 字符串,可能有也可能没有引号,例如"Helvetica Neue"bold
  • 颜色,可以通过它们的十六进制表示或名称来引用,例如 #c6538cblue
  • boolean 文字“true”或“false”。
  • 单例 null
  • 值列表,可以用空格或逗号分隔,可以用方括号括起来,也可以不用括号,比如 1.5em 1em 0 2emHelvetica、Arial、sans-serif[col1-start]
  • 地图 将值与键相关联,例如("background": red, "foreground": pink)

操作

Sass 定义了许多操作的语法:

  • ==!= 用于检查两个值是否相同。
  • +-*/% 具有它们通常的数字数学含义,具有特殊的 与科学数学中的单位使用相匹配的单位行为。
  • <<=>>= 检查两个数字是大于还是小于彼此。
  • andornot 具有通常的布尔行为。 Sass 认为每个值都是“真”,除了“假”和“空”。
  • +-/ 可用于连接字符串。
  • () 可用于明确控制操作的优先顺序。

其他表达方式

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