怎样把设计令牌映射到 CSS 变量？

把共同设计决定对应到网页样式中的命名值，并检查实际引用。

CSS 是控制网页颜色、大小和布局的样式语言。CSS 自定义属性，也叫 CSS 变量，是网页样式中可重复引用的命名值，可以用来实现部分设计令牌。

先记住这几件事

• 设计令牌说明决定与用途；CSS 变量是浏览器中的一种实现方式，两者不是完全相同的概念。
• 作用域 是一个值能影响的范围，例如整个页面或某个区域。
• 继承 是内部元素获得上层的值； 回退值 是在引用值不可用时采用的备用选择。
• 名字、单位和主题对应关系要记录清楚，再检查网页是否真的使用这些值。

实现规则见 MDN：使用 CSS 自定义属性 。

从决定到浏览器的流程

对应关系的示意

以下是教学用名字与数值； px 是网页使用的 CSS 像素单位。

用一个例子走一遍

团队确认普通内容间距后，开发者把 --content-gap 设为 16px ，并让资料页引用它。浏览器检查发现一个区块没变化，原因是那里仍使用手填距离。修正引用后，重新检查窄屏和长内容，再随网页发布。

边界与常见误解

改变量不代表全部部件都会变化，只有引用它并在对应范围内的地方才会受影响。回退值也不能修复所有无效样式。普通读者只需理解对应关系，具体代码和单位处理交给实现人员验证。