变量运算

变量

定义变量: 以 $ 符号开头，后接变量名，如 $baseColor
变量赋值
- 基本赋值，使用冒号分隔，赋值内容可以为变量，如 $baseColor: #ccc
- 使用 !default 给变量赋默认值，如 $baseColor: grey !default
  - 如果变量已被赋值，则不会被重新赋值
  - 如果变量未被赋值，则会被重新赋值
  - 如果变量为 null 值，则视为未被赋值，即会被重新赋值
使用变量: 直接使用即可，如 p{ color: $baseColor }
作用范围
- 定义在块内的变量只在该代码块内生效(局部变量)
- 定义在块外的变量在整个样式表中生效(全局变量)
- 使用 !global 可以将局部变量转换为全局变量

示例:

sass

$base-grey: #ccc
$base-border: 1px solid $base-grey
.rect
    border: $base-border

编译后:

css

.rect {
  border: 1px solid #ccc;
}

插值语句

通过 #{} 插值语句可以将值混入到注释、选择器、属性名中，插值语句可以避免 SassScript 的表达式运算

数据类型

SassScript 支持以下数据类型

数字: 可以含单位，如 0, 100px
字符串: 包括又引号和无引号字符串
- 有引号字符串，如 "http://xxx.com"
- 无引号字符串，如 bold
  - 使用插值 #{} 时，有引号字符串将被编译为无引号字符串
  - 在压缩模式下避免使用插值来表示颜色，应始终引用命名颜色
  - 一些特殊值将被视为无引号字符串，如 !important
布尔值: true 和 false
空值: null
List: 相当于 js 中的数组，如 0 auto
- 使用空格进行分割，如 0 auto
- 使用逗号进行分割，编译后将保留逗号，逗号一般用于强调数组的结构关系
- 使用圆括号进行分割
  - 圆括号相当于 js 中的 []，如 (1px 1px) (0 0)
  - 单独的圆括号表示空数组，不可直接编译
  - 若数组中包含空数组或空值，编译时将被清除
Maps: 相当于 js 中的 object，如 (key1: val1, key2: val2)
- 可以视为键值对的集合，相当于 js 中的 object
- 必须使用圆括号包裹，每组键值对通过逗号分割，键值通过冒号分割
- 键和值可以时 SassScript 中任何对象
- 在 List 函数中 Maps 会被转换为 List ，反之则不能

运算

通用运算
- ==, != 适用于所有数据类型
数字运算
- 支持关系运算 <, >, <=, >=
- 支持数字的 +, -, *, /, % 运算，对于不同的单位可以进行一定的转换

除法运算

css 中 / 可以起到分割的作用，SassScript 在以下情况将其视为除法运算

如果值或值的一部分使用变量或函数返回值表示
如果值被圆括号包裹
如果值是算术表达式的一部分

在某些情况下需要避免变量之间的运算，可以使用插值 #{} 语法

示例

sass

$size: 24px
$line: 36px
.p1
    font: 24px / 36px
.p2
    font: $size / $line
.p3
    font: #{$size} / #{$line}

编译后

css

.p1 {
  font: 24px / 36px;
}

.p2 {
  font: 0.66667;
}

.p3 {
  font: 24px / 36px;
}

颜色运算

颜色的运算会对组成当前颜色的红、绿、蓝三色进行分别计算，之后再进行合并

支持颜色与颜色，颜色与数组之间的运算
如果单色的运算值小于 00 则取 00
如果单色的运算值大于 ff 则取 ff
如果 rgba 或 hsla 表示的颜色进行计算时，颜色的 alpha (用于表示透明度) 值必须相等

字符串运算

SassScript 中使用 + 用于字符串的连接

无引号字符串之间的连接: 字符串相连，生成新的无引号字符串
有引号字符串之间的连接: 字符串相连，生成新的有引号字符串
无引号字符串连接有引号字符串: 字符串相连，生成新的无引号字符串
有引号字符串连接无引号字符串: 字符串相连，生成新的有引号字符串

布尔运算

SassScript 支持以下布尔运算

and
or
not

注意: 空字符串会被转换为 true

数组运算

数组无支持的运算方式，只能通过 list functions 控制

圆括号

使用圆括号可以改变运算的顺序

变量运算 ​

变量 ​

插值语句 ​

数据类型 ​

运算 ​

除法运算 ​

颜色运算 ​

字符串运算 ​

布尔运算 ​

数组运算 ​

圆括号 ​