样式表的结构
与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
。+
,-
和/
可用于连接字符串。(
并且)
可以用来显式控制操作的优先顺序。