文档 2

6. 值 Values

主要介绍 Sass 支持的数据类型, 用于变量存储等.

  • 数字类型
  • 字符串类型
  • 颜色类型
  • 列表类型
  • 布尔类型
  • null
  • Map 类型
  • 函数引用

6.1 数字类型

数字类型有两部分构成, 数值本身, 和单位. 数字可以带单位也可以不带单位.

Sass 兼容 CSS 的数字格式.

Sass 数字支持科学计数法, 用 e 分隔数值与指数. 例如: 5.2e3 或 6e-2 等.

注意:

  • Sass 不区分小数与整数.
  • 数字可以参与计算, 如果有单位也会参与计算, 但结果不一定是合法的 CSS.
  • Sass 的运算会自动合并兼容的单位. 如果单位不兼容会出错.
  • 除法运算中也会将相同的单位进行约分.
  • 应避免使用形如 #{$number}px 的插值, 因为这里不会生成数字, 而是无引号的字符串. 它无法参与计算, 如果需要可以使用 $number * 1px
  • 百分数比较特殊, 会被视为数字 + 单位 (因此 CSS 中, 百分数与浮点数是不同的东西).
  • 如果要将百分数转换为小数, 使用数学函数 math.div(百分数, 100%).
  • 将数字转换为百分数, 可以使用 $number * 100% 或 math.percentage() 函数.

image-20230719113400140

精度

Sass 内部使用 64 位浮点数, 转换为 CSS 时, 支持小数点后 10 位的精度.

  • 生成的 CSS, 只包含小数点后的前十位.
  • 如果小数点后的前十位相同, 那么 == 和 >= 视为相同.
  • 如果数字小数部分小于 0.0000000001 那么会被忽略掉.

注意不同的 Sass 实现, 得到的结果是不一样的.

image-20230719115125508

6.2 字符串

字符串是字符序列. Sass 支持两种字符串: 带引号的, 不带引号的 (也称为 identifier).

使用字符串函数可以对两种形式进行转换:

@use "sass:string";
string.unquote("...")
string.quote(...)

转义字符(略)

就是斜线转义字符

引号

单引号或双引号.

无引号

语法为

image-20230719155922285

也支持插值.

不是所有的 identifier 都会当做字符串处理

  • 颜色
  • null
  • true 和 false
  • not, and, 和 or

索引与子字符串

@use "sass:string";
string.length() // 取字符串长度
// Sass 也采用 base-1 来对字符串索引
string.index(str1, str2) // 返回 str2 在 str1 中的起始位置, 找不到返回 -1
string.slice(str, index) // 从 index 开始返回后续字符串, 支持负数索引.

6.3 Color

支持:

  • # 加 6 位十六进制数的语法.
  • # 加 8 位十六进制数的语法.
  • 颜色名字
  • rgb() 语法
  • rgba() 语法
  • hsl() 语法
  • hsla() 语法

注意: Sass 中有一些 颜色计算函数.

Last Updated:
Contributors: jk