样式表的结构
与CSS一样,大多数Sass样式表主要由包含属性声明的样式规则组成。但是Sass样式表具有许多可以与这些样式一起存在的功能。
声明永久链接声明
Sass样式表由一系列语句组成,对这些语句进行评估以构建最终的CSS。某些语句可能具有使用和定义的块,其中包含其他语句。例如,样式规则是带有块的语句。该块包含其他语句,例如属性声明。{}
在SCSS中,语句用分号分隔(如果该语句使用块,则这些分号是可选的)。在缩进语法中,它们只是由换行符分隔。
通用声明永久链接通用声明
这些类型的语句可以在Sass样式表中的任何位置使用:
CSS语句永久链接 CSS 语句
这些语句产生CSS。它们可以在以下任何地方使用@function:
- 样式规则,如
h1 { /* ... */ }。 - CSS规则,如
@media和@font-face。 - Mixin使用
@include。 - 该
@at-root规则。
顶级声明永久链接顶级声明
这些语句只能在样式表的顶层使用,或嵌套在CSS语句的顶层:
其他声明永久链接其他声明
表达式永久链接表达式
一个表达式是任何的推移的特性或变量声明的右手侧。每个表达式产生一个值。任何有效的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具有通常的布尔行为。Sass认为除false和之外的每个值都是“ true”null。+,-和/可用于连接字符串。(并且)可以用来显式控制操作的优先顺序。