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