变量

Sass变量很简单:将值赋给以$开头的名称,然后可以引用该名称而不是值本身。尽管它们很简单,但它们是Sass带来的最有用的工具之一。变量可以减少重复、执行复杂的数学运算、样式库的配置等等。

变量声明看起来很像属性声明:它写的是<variable>: <expression>。与只能在样式规则或at-rule中声明的属性不同,变量可以在任何需要的地方声明。要使用变量,只需将它包含在一个值中。

CSS有它自己的变量,这些变量与Sass变量完全不同。已知的差异!

  • Sass变量会被编译,CSS变量包含在CSS输出中。
  • CSS变量可以对不同的元素有不同的值,但是Sass变量一次只有一个值。
  • Sass变量是命令式的,这意味着如果您使用一个变量,然后更改它的值,那么前面的使用将保持不变。CSS变量是声明性的,这意味着如果您更改值,它将影响早期使用和后期使用。

与所有Sass标识符一样,Sass变量将连字符和下划线视为相同的。这意味着$font-size$font_size都引用同一个变量。这是Sass早期的历史遗留问题,当时它只允许在标识符名称中使用下划线。一旦Sass添加了对连字符的支持来匹配CSS的语法,这两种方法就等价了,从而使迁移更加容易。

默认变量

通常,当您为变量赋值时,如果该变量已经有值,则会覆盖其旧值。但是,如果您正在编写一个Sass库,您可能希望允许用户在使用库的变量生成CSS之前定制它们。

为此,Sass提供了!default标志。只有在变量未定义或其值为空时,才会将值赋给该变量。否则,将使用现有值。这样,用户可以在导入库之前设置变量,以定制库的行为。

作用域

样式表顶层声明的变量是全局的。这意味着全局变量在声明以后可以在任何地方使用 - 即使是在另一个样式表中!但这并不适用于所有的变量。在块中声明的变量(SCSS中的大括号或Sass中的缩进代码)通常是本地的,并且只能在声明它们的块中访问。

同名变量

局部变量与全局变量的名称可以相同。如果发生这种情况,实际上有两个同名的不同变量:一个局部变量和一个全局变量。这有助于确保编写局部变量的作者不会意外地更改他们甚至不知道的全局变量的值。

如果需要在局部范围内(例如mixin)设置全局变量的值,可以使用!global标志。标记为!global的变量声明将始终分配给全局作用域。

兼容性:Dart Sass 2.0.0+ |LibSass ✗|Ruby Sass ✗

旧的Sass版本!global可用于处理还不存在的变量。为确保每个样式表声明是相同的变量(无论它是如何被执行的),这种行为是不赞成的。

!global标志建议用于设置已经在顶层文件声明的变量。不建议用于声明新变量。

流程作用域

流程控制中声明的变量具有特殊的作用域:它们不会在流程控制的同一级别上隐藏变量。相反,它们只是赋值给那些变量。这使得有条件地为变量赋值或将值构建为循环的一部分变得容易得多。

流程控制只能在给在外部作用域已经声明过的变量赋值,它们不能声明新变量。即使需要将变量赋值为null,也要确保在赋值之前已经声明了变量。

变量函数

Sass核心库为处理变量提供了两个高级函数。variable-exists():判断给定名称的变量是否存在于当前作用域中;global-variable-exists():给定名称的变量是否存在于全局作用域中。

用户有时希望使用插值函数根据另一个变量定义变量名。Sass不允许这样做,因为这样一来,一眼就很难看出在哪里定义了哪些变量。不过,您可以做的是定义一个从名称到值的映射,然后可以使用变量访问这些值。

上次更新: 2019-11-5 4:49:11 PM