在前端开发项目中，我们常常需要将设计师制作的 Sketch 画稿转成代码。这就需要使用 syfmto，一款基于 Node.js 开发的 npm 包，能够将 Sketch 画稿中的样式转化为 CSS 或者 Sass 代码。
在本篇文章中，我将详细介绍 syfmto 的使用方法，帮助大家快速上手该工具，并且可以在平时的开发工作中能够更加高效地使用这个工具。
安装 syfmto
使用 syfmto 之前，你需要确保你的计算机中已经安装了 Node.js。你可以在 Node.js 的官方网站上下载并安装它（https://nodejs.org ）。
一旦你安装了 Node.js，你就可以使用以下命令来安装 syfmto：
--- ------- -- ------
这个命令会在你的全局环境下安装 syfmto。
使用 syfmto
首先，我们需要将 Sketch 画稿中的样式导出为 JSON 文件。当你保存 Sketch 画稿为 JSON 文件时，确保你将文本格式（Plain Text）选择为 JSON。如下图所示：
在你生成了 JSON 文件后，你可以使用以下命令将其转化为 CSS 或者 Sass 代码。
------ ------- -------- ---------
<input> 表示输入文件的路径，即导出的 Sketch 画稿的 JSON 文件。
<output> 表示输出文件的路径，即最终生成的 CSS 或者 Sass 代码的文件。
[options] 为可选参数，你可以使用它来自定义输出的 CSS 或者 Sass 代码。
下面是一个例子，将 input.json 转化为 output.css：
------ ---------- ----------
如果你希望将其转化为 Sass 代码，你可以使用 --sass 参数。如下面这个例子：
------ ---------- ----------- ------
syfmto 的选项
你可以使用以下参数来自定义 syfmto 的输出结果：
1. --prefix
该参数将会为输出结果中的 CSS 类名添加前缀。
以下是一个例子：
------ ---------- ---------- ----------------------
这个命令将会为输出结果中的 CSS 类名添加 .my-namespace 前缀。如下所示：
----------------------- - -- --------- --- -- - -------------------- - -- ------ --- -- -
2. --indent
该参数将会为输出结果中的代码添加缩进。
以下是一个例子：
------ ---------- ---------- ----------
这个命令将会为输出结果中的代码添加 2 个字符大小的缩进，如下所示：
---------- - -- --------- --- -- - ------- - -- ------ --- -- -
3. --sass
该参数将会将输出结果转化为 Sass 代码。
以下是一个例子：
------ ---------- ----------- ------
这个命令将会将输出结果转化为 Sass 代码，如下所示：
---------- - -- --------- --- -- - ------- - -- ------ --- -- -
结语
syfmto 是一款十分实用的 npm 包，能够帮助前端开发人员更加高效地将 Sketch 画稿转化为代码。通过本篇文章的介绍，相信大家已经能够熟练地使用它，并且能够在平时的开发工作中更加高效地使用该工具。
最后，我希望这篇文章能够对前端开发人员有所帮助，同时也希望大家能够掌握更多前端方面的知识，不断提升自己的技能水平。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005601781e8991b448de39e