变量与样式的关系

变量 和 样式 是两种密切相关但用途不同的设计资产，它们共同构成了设计系统的基础。

变量 核心特性：

• 存储单一值：只保存一个颜色或一个数值

• 基础单元：如同设计系统中的“原子”

• 可全局修改：一处修改，所有引用处自动更新

• 支持模式切换：轻松切换 深色 / 浅色 等主题

样式核心特性：

• 存储组合值：保存多个属性的组合（如填充、描边）

• 复合结构：如同由“原子”组合而成的“分子”

• 一键应用到图层：快速复用完整的视觉外观

• 可引用变量：样式的组成可以引用变量值

变量：原子单位，像是一个积木块，它可以应用到各种地方，它定义的是一个最小单元。

样式：像是一个分割好的盒子，里面的结构固定，要按照固定的位置填放对应的物品，它定义的是一个整体。

---

核心差异

存储内容：单一值 vs 组合值

变量只存储一个属性值，它是不可再分的基础单元：

• 颜色变量：存储一个具体的颜色值，如 #007AFF 100%

• 数值变量：存储一个具体的数值，如 16px、8px

样式则存储多个属性的组合，形成完整的视觉表现：

• 填充样式：包含纯色、渐变、甚至多层叠加

• 文字样式：包含字体、字号、字重、行高、字间距等整套排版规则

• 特效样式：包含阴影的颜色、模糊度、偏移量等组合效果

使用场景：基础规范 vs 定义外观

特性	变量	样式
存储内容	单一属性值（如 一个颜色、一个数值）	多个属性的组合（如 填充+描边+圆角）
使用场景	定义基础规范（品牌色板、间距体系、字号梯度）	定义视觉外观（按钮、卡片、输入框样式）
管理方式	原子化管理便于全局修改	整体复用

变量的典型应用场景是 建立设计系统的基础规范：

• 定义品牌色板（主色、辅色、警示色）

• 管理间距体系（xs / s / m / l / xl 等梯度）

• 规范字号梯度（12 / 14 / 16 / 20 / 24 等标准值）

• 控制圆角数值（4 / 8/ 12 / 16 等统一标准）

样式的典型应用场景是 创建可复用的整体外观：

• 定义按钮样式（填充色 + 描边 + 圆角 + 阴影的完整组合）

• 创建卡片样式（背景色 + 边框 + 阴影的视觉规范）

• 设置输入框样式（填充色 + 边框色 + 圆角的交互状态）

• 规范文字排版（字体 + 字号 + 字重 + 行高的文本样式）

管理方式：原子管理 vs 整体复用

变量的管理是原子化的，专注于单一属性的集中控制。修改变量的值，所有引用该变量的地方都会自动更新，非常适合维护设计系统中那些需要全局统一的 基础 Token。

样式的管理则是整体性的，它将多个属性打包成一个可复用的资产。你可以一键将样式应用到图层上，快速保持设计的一致性。样式内部可以引用变量，这使得你既能享受样式的便捷，又能保留变量的灵活性。

---

何时用变量，何时用样式

核心原则：变量用于定义 基础规范（如颜色、间距），样式用于定义 整体外观（如按钮、卡片）。两者组合使用，可实现设计系统灵活性与操作便捷性。

选择变量

符合以下特征时，建议使用 变量：

• 只需要管理一个值（一个颜色或一个数值）

• 希望这个值能在 多处复用，并且能够 全局统一修改

• 需要支持 模式切换（如深色/浅色主题切换）

• 正在定义设计系统的 基础 Token（原子级单位）

选择样式

符合以下特征时，建议使用 样式：

• 需要组合多个属性形成一个完整的外观

• 希望这个外观组合能 **一键应用到 **多个图层

• 属性组合模式 相对固定，需要被重复使用

• 想要创建 成套的外观（如不同类型的按钮）

应用入口

通过变量与样式的引用关系，可以用「包含关系」来理解两者的应用入口设置

---

引用关系

作为进阶的使用技巧，可分为两种引用方式：变量引用变量、样式引用变量。

变量引用变量

变量之间可以相互引用，建立层级化的变量体系，形成从基础定义→设定语义→具体应用的链路

引用流程可分为三层：

1. 基础变量：定义最原始的设计属性，如「基础/主色」= #007AFF

2. 语义变量：引用创建好的基础变量并定义其具体用法（语义化），如「深色主题/主色」引用「基础/主色」

3. 应用层：引用语义变量用于具体图层，如「深色主题/主色」应用到 主按钮

优势：当公司品牌升级需要更换主色时，只需修改「基础 / 主色」这一个变量，所有引用它的语义变量、应用图层都会自动更新，实现了从基础规范到设计应用的灵活同步。

样式引用变量

变量与样式通过引用机制可以紧密协作，形成高效的同步链条。

引用流程可分为三层：

1. 变量层：用变量定义所有基础属性，如品牌色、间距、字号、圆角等。

2. 样式层：用样式去组合这些变量，形成具体的视觉外观，如“主按钮样式”引用“品牌主色变量”和“中等圆角变量”。

3. 应用层：在设计时，直接将样式应用到具体图层上。

优势：当需要调整品牌色时，只需修改一个颜色变量，所有引用了该变量的按钮、卡片、文字样式都会自动更新，所有使用了这些样式的图层也同步更新，实现了高效、精准的全局控制。

---

总结与学习推荐

要点总结

本质区别

• 变量 = 原子：存储单一值（一个颜色、一个数值），是设计系统的基础单元

• 样式 = 分子：存储多属性组合（填充+描边+圆角等），是完整的视觉外观

使用原则

• 变量用于定义 基础规范（品牌色板、间距体系、字号梯度）

• 样式用于定义 整体外观（按钮、卡片、输入框样式）

引用机制

引用方式	链路结构	应用场景
变量引用变量	基础变量 → 语义变量 → 图层	品牌升级、主题适配（深色/浅色）
样式引用变量	变量 → 样式 → 图层	组件样式统一管理、快速复用

核心价值

一处修改，全局生效 修改基础变量，所有引用它的语义变量、样式、图层自动同步更新，实现设计系统的灵活可控。

评价此篇文章：👍🏻 有帮助 👎🏻 无帮助

👉本篇文章对你是否有帮助？👍🏻 有帮助 👎🏻 无帮助，我们期待着你的反馈。