样式表的结构

与CSS一样,大多数Sass样式表主要由包含属性声明的样式规则组成。但是Sass样式表有更多的特性可以同时存在。

语句

Sass样式表由一系列语句组成,为了构建生成的CSS,将对这些语句进行计算。有些语句可能有使用{}定义的代码块,其中包含其他语句。例如,样式规则包含属性声明等其他语句的代码块。

在SCSS中,语句之间用分号分隔(如果语句使用块,分号是可选的)。在缩进语法中,它们只是用换行符分隔。

普通语句

以下类型的语句可以在Sass样式表的任何地方使用:

CSS语句

以下语句生成CSS。它们可以在除了@function任何地方使用:

顶层语句

以下语句只能在样式表的顶层使用,或者嵌套在顶层的CSS语句中:

其它语句

  • width: 100px这样的属性声明只能在样式规则和一些CSS at-rules中使用。
  • @extend规则只能在样式规则中使用。

表达式

表达式是位于属性或变量声明右侧的内容。每个表达式都产生一个。任何有效的CSS属性值也是一个Sass表达式,但是Sass表达式要比普通的CSS值强大得多。它们作为参数传递给混合器函数,使用@if规则用于控制流,并可进行算数运算。我们将Sass的表达式语法称为SassScript。

字面量

最简单的表达式只是表示静态值:

  • Numbers,可能有单位,也可能没有单位,比如12100px
  • Strings,可能有也可能没有引号,比如"Helvetica Neue"bold
  • Colors,可以通过十六进制表示或名称引用,比如#c6538cblue
  • Booleanstruefalse。 单例null。
  • Lists,可以用空格或逗号分隔,也可以用方括号括起来,也可以完全不括起来,比如1.5em 1em 0 2emHelvetica,Arial,sans-serif或[col1-start]。
  • Maps,将值与键关联的映射,如("background": red, "foreground": pink)

操作符

Sass定义了许多操作符语法:

  • ==和!=用于检查两个值是否相同。
  • +、-、*、/和%对于数字具有通常的数学意义,对于与科学数学中使用的单位相匹配的单位具有特殊的行为。
  • <、<=、>和>=比较两个数字的大小。
  • and、or、not有布尔行为。除了falsenull, Sass都认为是true
  • +、-和/可用于连接字符串。
  • ( 、)可用于显式控制操作的优先顺序。

其它表达式

  • 变量,如$var
  • 函数调用,如nth($list, 1)或var(--ain-bg-color),它们可以调用Sass核心库函数或用户定义的函数,也可以直接编译成CSS。
  • 特殊函数,如calc(1px + 100%)url(http://myapp.com/assets/logo.png),都有特定的解析规则。
  • 父选择器&
  • !important,它被解析为一个未引用的字符串。
上次更新: 2019-10-11 1:26:28 PM