声明
Sass 样式表由一系列 statements
组成,这些语句被评估以构建生成的 CSS。 一些语句可能有_blocks_,使用{
和}
定义,其中包含其他语句。 例如,样式规则是带有块的语句。 该块包含其他语句,例如属性声明。
在 SCSS 中,语句由分号分隔(如果语句使用块,分号是可选的)。 在缩进语法中,它们只是用换行符分隔。
通用语句
这些类型的语句可以在 Sass 样式表中的任何地方使用:
CSS 语句
这些语句产生 CSS。 它们可以在除@function
之外的任何地方使用:
- Style rules, like
h1 { /* ... */ }
. - CSS at-rules, like
@media
and@font-face
. - Mixin uses using
@include
. - The
@at-root
rule.
顶级声明
这些语句只能在样式表的顶层使用,或嵌套在顶层的 CSS 语句中:
- Module loads, using
@use
. - Imports, using
@import
. - Mixin definitions using
@mixin
. - Function definitions using
@function
.
其他声明
- 属性声明,例如
width: 100px
只能在样式规则和某些 CSS at 规则中使用。 @extend
规则 只能在样式规则中使用。
表达式
expression 是位于属性或变量声明右侧的任何内容。 每个表达式都会产生一个值。 任何有效的 CSS 属性值也是 Sass 表达式,但 Sass 表达式比普通 CSS 值更强大。 它们作为参数传递给 mixins 和 functions,用于使用 @if
规则 控制流程,并使用 算术。 我们称 Sass 的表达式语法为 SassScript。
文字
最简单的表达式只代表静态值:
- 数字,可能有也可能没有单位,例如“12”或“100px”。
- 字符串,可能有也可能没有引号,例如
"Helvetica Neue"
或bold
。 - 颜色,可以通过它们的十六进制表示或名称来引用,例如
#c6538c
或blue
。 - boolean 文字“true”或“false”。
- 单例
null
。 - 值列表,可以用空格或逗号分隔,可以用方括号括起来,也可以不用括号,比如
1.5em 1em 0 2em
、Helvetica、Arial、sans-serif
或[col1-start]
。 - 地图 将值与键相关联,例如
("background": red, "foreground": pink)
。
操作
Sass 定义了许多操作的语法:
==
和!=
用于检查两个值是否相同。+
、-
、*
、/
和%
具有它们通常的数字数学含义,具有特殊的 与科学数学中的单位使用相匹配的单位行为。<
、<=
、>
和>=
检查两个数字是大于还是小于彼此。and
、or
和not
具有通常的布尔行为。 Sass 认为每个值都是“真”,除了“假”和“空”。+
、-
和/
可用于连接字符串。(
和)
可用于明确控制操作的优先顺序。