样式表的结构
就像 CSS 一样,大多数 Sass 样式表主要由包含属性声明的样式规则组成。但 Sass 样式表还有更多功能,可以与这些功能并存。
语句语句永久链接
Sass 样式表由一系列语句组成,这些语句将按顺序评估以构建结果 CSS。一些语句可能具有使用 {
和 }
定义的块,其中包含其他语句。例如,样式规则是一个带有块的语句。该块包含其他语句,例如属性 声明。
在 SCSS 中,语句由分号分隔(如果语句使用块,则分号是可选的)。在缩进语法中,它们仅由 换行符分隔。
通用语句通用语句永久链接
这些类型的语句可以在 Sass 样式表的任何位置使用
CSS 语句CSS 语句永久链接
这些语句生成 CSS。它们可以在 @function
之外任何位置使用
- 样式规则,如
h1 { /* ... */ }
。 - CSS @ 规则,如
@media
和@font-face
。 - Mixin 使用使用
@include
。 @at-root
规则。
顶级语句顶级语句永久链接
这些语句只能在样式表的顶级使用,或嵌套在顶级CSS 语句中
其他语句其他语句永久链接
- 属性声明(如
width: 100px
)只能在样式规则和一些 CSS at 规则中使用。 @extend
规则只能在样式规则中使用 。
表达式表达式永久链接
表达式是属性或变量声明右侧的任何内容。每个表达式都会生成一个值。任何有效的 CSS 属性值也是一个 Sass 表达式,但 Sass 表达式比普通的 CSS 值强大得多。它们作为参数传递给 混合 和 函数,用于使用 @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
具有通常的布尔行为。Sass 认为除了false
和null
之外的每个值都是“true”。+
、-
和/
可用于连接字符串。(
和)
可用于明确控制运算的优先级顺序。