什么是 theo
theo 是一个由 Facebook 开发的 npm 包，用于将设计系统中的样式转换成可重用的 CSS/SCSS 变量、组件和 mixin 的工具。theo 通过定义 JSON 格式的参数，生成 CSS/SCSS 变量和 mixin，支持多种格式和输出方式。
安装和使用
安装 theo
使用 npm 安装 theo：
npm install theo --global
使用 theo
使用 theo 的命令行工具需要创建一个 JSON 格式的配置文件。以下是一个例子：
-- -------------------- ---- -------
-
------------ -
------- -----
--
--------- -
------- ------
--
---------------------- ----
-------- -
-
-------- ------------
--------- -------------
-
-
-- transform：指定生成的 CSS 变量的类型，可选的值有 web、ios、android、default；
- format：指定生成的文件格式，可选的格式有 css、scss、less、stylus、common.js、es6.js 等；
- customPropSeparator：自定义分隔符用于 CSS 变量的名称（默认为“--”）；
- files：指定输入和输出文件的路径。
在上述配置文件中，js 文件是一个对象字面量格式的模板，下面是一个样例：
-- -------------------- ---- -------
-------------- - -
--------- -
------- ---------
------ ---------
------- ---------
------ --------
--
------ -
-------- ----------
---------- ----------
-------- ----------
-------- ----------
------- ---------
-
--在上述样例中，定义了一些基础样式变量，可以根据项目需要自行定义。
有了以上配置和样例，执行以下的命令即可生成 SCSS 变量：
theo tokens.json
执行成功后，会在当前目录下生成 tokens.scss 文件，内容如下：
-- -------------------- ---- ------- ----------------- ------- ---------------- ------- ----------------- ------- ---------------- ------- --------------- -------- ----------------- -------- --------------- -------- --------------- -------- -------------- --------
有了生成的 SCSS 变量，我们可以方便地在项目中使用了，如：
@import "tokens";
.main {
font-size: $fontSize-medium;
color: $color-primary;
}小结
npm 包 theo 是一个方便的将设计系统中的样式转换成可重用的 CSS/SCSS 变量、组件和 mixin 的工具。通过定义 JSON 格式的参数，以及提供一个对象字面量格式的样例，theo 可以生成多种格式和输出方式的样式变量。通过使用 theo 可以提高代码重复利用率，减少代码量，加快开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedada6b5cbfe1ea0610cdd