在前端开发过程中，有时候需要将设计师提供的 Sketch 设计稿转化为开发所需的代码。而这样的转化可以通过使用 sketch-expander 这个 npm 包来实现。
什么是 sketch-expander？
sketch-expander 是一个用于将 Sketch 设计稿转换为代码的 npm 包。它可以将 Sketch 中的图层、文本、遮罩、矢量等元素转化为 CSS 或 SASS 代码，从而帮助开发者快速将设计稿转为可用代码。
如何安装 sketch-expander？
使用 npm 安装 sketch-expander 很简单，只需在终端中输入以下命令即可：
npm install sketch-expander
如何使用 sketch-expander？
使用 sketch-expander，我们可以通过以下几个步骤将 Sketch 设计稿转化为代码：
1. 将 Sketch 文件导出为 JSON 格式
首先，我们需要在 Sketch 中将设计稿导出为 JSON 文件，导出方法如下：
- 打开 Sketch 设计稿，选择菜单中的 "File" -> "Export…"；
- 在 "Export" 窗口中选择 "JSON" 格式，并选择导出路径；
- 点击 "Export" 即可将设计稿导出为 JSON 文件。
2. 使用 sketch-expander 命令行工具
接下来，我们需要使用 sketch-expander 的命令行工具来将导出的 JSON 文件转换为代码。在终端中输入以下命令：
npx sketch-expander path/to/json/file.json -o path/to/output/dir/
其中，path/to/json/file.json 是需要转换的 Sketch JSON 文件路径，path/to/output/dir/ 是输出文件目录路径。
3. 运行并查看转换结果
转换完成后，我们可以在输出文件目录中查看转换后的代码文件。其中，index.(css|sass) 文件是我们最终需要使用的代码文件，该文件中包含了我们设计稿中的所有元素转化后的 CSS 或 SASS 代码。
示例代码
下面是一个简单的示例，展示如何使用 sketch-expander 将 Sketch 设计稿转化为 CSS 代码。
- 在 Sketch 中创建一个设计稿，例如：
- 导出该设计稿为 JSON 文件，并保存在
path/to/json/file.json中； - 在终端中运行以下命令：
npx sketch-expander path/to/json/file.json -o path/to/output/dir/
- 查看输出目录中的
index.css文件，内容如下：
-- -------------------- ---- ------- ------- - ------ ------ ------- ------ ----------------- -------- -------------- ---- - ------- - ------ ------ ------- ------ ----------------- -------- -
通过这个简单的示例，我们可以看到 sketch-expander 是如何将 Sketch 中的设计元素转化为 CSS 代码的。
总结
sketch-expander 是一个非常实用的 npm 包，它可以帮助前端开发者快速将设计稿转化为可用的代码。通过本篇文章的介绍，相信大家已经了解了如何使用该包来转换 Sketch 设计稿为代码。希望这篇文章能够对大家在前端开发中的工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005585e81e8991b448d5955