前言
设计系统中的设计通常是使用调色板、字体、栅格和其他视觉元素组成设计原则和规范。这些元素的颜色、尺寸、边距等属性分别称为 design token(设计令牌)，它们通常以 sass, less 和 json 的形式定义，然后根据这些定义生成 CSS 样式表。
为了提高设计系统的维护性和可扩展性，我们可以将设计令牌抽象出来并存储到 npm 包中。这样在多个项目中使用相同的设计令牌，可以减少重复的工作量并提高代码的一致性。同时，通过使用 design token ，还可以提高团队之间的沟通效率。
在本教程中，我们将介绍如何使用 design-tokenize 这个 npm 包来构建一个具有设计令牌的设计系统。
安装
首先，我们需要安装 design-tokenizenpm 包。打开你的终端，输入以下命令：
npm install design-tokenize --save-dev
或者使用 npm/yarn 包管理器添加依赖
npm install --save-dev design-tokenize
使用
接下来，我们将在一个新的项目中使用 design-tokenize。
1. 创建配置文件
创建项目根目录的 tokens.json文件，用于存储我们的设计令牌。在 tokens.json 中，我们可以定义多种类型的令牌，例如：
-- -------------------- ---- -------
-
-------- -
---------- -
-------- ---------
--
------------ -
-------- ------
-
--
------------- -
-------------- -
-------- ----------- ------ -----------
--
------------ -
-------- -
-------- ------
--
--------- -
-------- ------
--
-------- -
-------- ------
-
-
-
-2. 构建 CSS 样式表
通过运行 $ npx design-tokenize 命令，将配置文件 tokens.json 转换为 styles.css 文件：
npx design-tokenize --input tokens.json --output styles.css
3. 在 HTML 中使用
现在，我们可以在 HTML 中使用 styles.css 文件，通过应用样式类名的方式来使用设计令牌：
-- -------------------- ---- -------
------
------
----- ---------------- ------------------
-------
------
--- ------------------------------ -----------
-- -------------------------- -- - ------- ----- ---------
-------
-------注意： 对于 tokens.json 中定义的嵌套对象，design-tokenize 将自动为每个对象属性的层次结构创建类名。例如，在上面的配置文件中，使用 .typography-font-size-small 表示字体大小的小号。
功能扩展
为了更好的使用设计令牌这个功能，我们可以将其与 CSS 预处理器结合起来。
在 Sass 中使用
在 Sass 中使用，例如：
@import './token';
.heading {
font-size: map-get($font-size, large);
color: map-get($color, primary);
}在 Less 中使用
在 Less 中使用，例如：
@import './token';
.heading {
font-size: @font-size-large;
color: @color-primary;
}结论
使用 design-tokenize 将设计令牌提取出来并作为一个 npm 包使用可以提高设计系统的维护性和可扩展性，避免多个项目中重复编写相同的样式表。同时，我们还可以将其与 CSS 预处理器结合起来，从而更好的使用设计令牌这一功能。在日常的前端开发中，设计令牌也可以作为 UI 设计规范，从而更好地提高前后端配合的效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562a781e8991b448dfe74