一、简介

SassScript 支持 7 种主要的数据类型：

• 数字，1, 2, 13, 10px
• 字符串，有引号字符串与无引号字符串，"foo", 'bar', baz
• 颜色，blue, #04a3f9, rgba(255,0,0,0.5)
• 布尔型，true, false
• 空值，null
• 数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
• maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)

SassScript 也支持其他 CSS 属性值，比如 Unicode 字符集，或 !important 声明。然而 Sass 不会特殊对待这些属性值，一律视为无引号字符串。

二、数据类型

1. 数字（Numbers）

• 特点：整数、小数、带单位（如 12px, 1.5rem）或不带单位的值。
• 示例：42, 3.14, 100%, 20px

2. 字符串（Strings）

• 特点：可以带引号（"text", 'text'）或不带引号（如 sans-serif）。
• 示例："Helvetica", bold, url("image.png")

3. 颜色（Colors）

• 特点：支持 HEX、RGB、RGBA、HSL、HSLA 等格式。
• 示例：#ff0000, rgb(255, 0, 0), hsl(0, 100%, 50%)

4. 布尔值（Booleans）

• 特点：逻辑值 true 或 false，用于条件判断。
• 示例：@if $is-active { ... }

5. 空值（Null）

• 特点：表示“无值”，用于变量占位或重置。
• 示例：$variable: null;

6. 列表（Lists）

• 特点：用空格或逗号分隔的集合（类似数组）。
• 示例：1px 2px 3px, "Arial", sans-serif

7. 映射（Maps）

• 特点：键值对集合（类似 JavaScript 对象）。
• 示例：("primary": #007bff, "secondary": #6c757d)

三、其他补充类型

• 函数引用（Function References）：通过 get-function() 引用函数，用于动态调用。

四、常见操作

• 类型检查：

  type-of(42px)    // "number"
  is-color(#fff)   // true

• 类型转换：

  $number: 42 + 0px; // 转换为带单位的数字
  $string: 42 + ""; // 转换为字符串 "42"

五、实际应用

• 列表：生成间距工具类（如 .mt-10, .mb-20）。
• 映射：管理主题颜色或响应式断点。
• 布尔值：控制功能开关（如暗黑模式）。

掌握这些数据类型，能更高效地编写动态、可维护的 Sass 代码！ 🚀

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24