CSS Academy · 课时

令牌工具：Style Dictionary

Q: 「令牌工具：Style Dictionary」这节课中我会学到什么？

使用 Style Dictionary 工具转换设计令牌，并将其分发到不同平台。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 Style Dictionary 工具转换设计令牌，并将其分发到不同平台。

令牌工具：Style Dictionary 是 CoddyKit 上的免费 CSS Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

什么是样式字典

样式字典是亚马逊推出的开源构建工具，可以将令牌数据源转换为各个平台的输出：CSS 自定义属性、SCSS 变量、iOS 常量、安卓 XML，以及 JavaScript/TypeScript 模块，所有内容都来自同一个事实来源。

项目结构

将令牌以 JSON 或 JSON5 文件的形式组织在 tokens/ 目录中。样式字典会自动合并所有文件。请按类别拆分文件：tokens/color.json、tokens/spacing.json、tokens/typography.json。

令牌数据格式

每个令牌都是一个嵌套对象，包含 value 键，以及可选的 type、description 和 comment 字段。样式字典会将嵌套结构展平为点号表示法名称，以便输出。

  <pre class="json-block">{
  "color": {
    "brand": {
      "primary": { "value": "#3b82f6", "type": "color" }
    }
  }
}</pre>

配置文件

config.json 指定来源（令牌文件）、平台（网页、iOS、安卓）以及每个平台使用的转换和格式。每个平台都可以应用不同的转换并输出不同的文件格式。

  <pre class="json-block">{
  "source": ["tokens/**/*.json"],
  "platforms": {
    "css": {
      "transformGroup": "css",
      "buildPath": "dist/css/",
      "files": [{"destination": "variables.css", "format": "css/variables"}]
    }
  }
}</pre>

转换

转换会在构建期间修改令牌值：color/css 将颜色格式化为十六进制，size/rem 将 px 转换为 rem，name/cti/kebab 根据嵌套的类别-类型-项目结构生成短横线命名。

格式

格式决定输出文件的内容。内置格式包括：css/variables 输出 CSS :root 块，scss/variables 输出 SASS 变量，javascript/module 导出 JS 对象。自定义格式可以实现所需的任何输出结构。

令牌之间的引用

使用大括号语法引用其他令牌：{"value": "{color.brand.primary}"}。样式字典会在构建时解析引用，并输出具体值。引用会建立从别名到全局令牌的映射。

自定义转换

请注册自定义转换以处理项目特有的需求：去除颜色的透明度、转换设计工具的透明度值，以及添加供应商前缀。自定义转换可以像内置转换一样插入构建流程。

运行构建

运行 npx style-dictionary build，或将其添加到包管理器的构建脚本中。输出文件会写入配置的 buildPath 目录。您可以提交生成的文件，也可以在持续集成的构建时生成它们，这两种模式都很常见。

与 Figma 集成

Figma 的令牌工作室会将令牌数据同步到 GitHub 仓库。当数据发生变化时，样式字典会在持续集成中运行，自动生成更新后的 CSS 和平台文件。设计变更无需手动复制粘贴即可传递到代码中。

令牌版本管理

在包管理器中为令牌包设置版本。使用者锁定某个版本并有计划地升级。变更日志会记录新增、弃用和移除的令牌。语义化版本会区分破坏性变更与安全更新。

知识检查

“转换”在样式字典中起什么作用？

总结

样式字典通过可配置的转换和格式，将单一的令牌数据源转换为特定平台的输出。它支持从 Figma 到代码的令牌同步、跨平台一致性，以及团队可以有计划地使用和升级的版本化令牌包。

常见问题解答

「令牌工具：Style Dictionary」课时是免费的吗？

是的 — 「令牌工具：Style Dictionary」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「令牌工具：Style Dictionary」这节课中我会学到什么？

使用 Style Dictionary 工具转换设计令牌，并将其分发到不同平台。你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「令牌工具：Style Dictionary」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 CSS Academy