推荐一款优秀的前端切图编译工具：Prepros

分手后的思念是犯贱 2021-09-14 15:42 476阅读 0赞

有朋友让我推荐一款优秀的前端切图的编译工具，写篇博客介绍一下。在我以往使用的前端编译工具中，用的最有效率且最顺手的要数Prepros，百度一下 "Prepros" 就可以找到这款工具的官网。Prepros支持的编译格式有很多种，包括Sass、Less、Stylus等，我比较习惯于使用Sass，因此本篇以编译Sass为例，详细为大家介绍一下这款工具。

（注）如果您对Sass还不太了解，可以参考我的这篇文章[《Sass快速入门》][Sass]

Prepros拥有的强大功能特性及优秀的人性化设计：

（1）支持多种格式编译，包括Sass, Less, Stylus, Jade等，在主流样式编译中总有一款您熟悉的。

（2）编译成功后动态刷新页面，摆脱每次调整样式后都要在浏览器按一次F5刷新页面看效果。

（3）Prepros依然支持原生Css，意味着如果您并不擅长使用样式编译，可以选择原生写法。

（4）同步支持web端和移动端，若您需要调试移动端界面，Prepros会为您生成好二维码，扫一下即可调试。

（5）虽然为一款29美元的收费软件，但从不勉强用户交钱，您也可以免费使用所有功能，为它打Call。

先去Prepros官网下载这款软件吧，下载安装成功后，打开Prepros 界面如图所示：

![SouthEast][]

我建立了一个名为prepros项目，项目目录下有个资源文件夹assets用于存放图片等资源，assets同级目录下创建了一个sass.scss文件，为样式编译文件，index.html为主页。我们点击sass.scss文件，界面变成如图所示：

![SouthEast 1][]

注意，右边界面我的两个设置，设为自动编译，编译排版格式为Expanded。此时若编译sass.scss，你会发现还是编译不过去，因为编译器我们还得选择一下，选中Settings选项，点击Compiler Settings，再选中Sass，修改 一下Sass编译器，如下图所示：

![SouthEast 2][]

编译器设为Ruby，编译排版依旧设为Expanded，这时，您已经可以顺利编译Sass文件了。

打开sass.scss文件，写入脚本：

.mycolor {
        color: darkseagreen;
    }

打开index.html文件，引入css文件，

写入标签脚本：

<div class="mycolor">Hello China</div>

点击web调试按钮，显示效果如下：

![SouthEast 3][]

此时，若修改了sass.scss，只要保存，Propres即会帮您自动编译并刷新页面，摆脱F5，很方便有木有。如果你调试的是移动端App项目，点击移动端调试按钮，即会生成二维码，用手机扫一下就会看到该页面的app效果。

![SouthEast 4][]

[Sass]: http://blog.csdn.net/zeping891103/article/details/78889585
[SouthEast]: /images/20210813/4df5e8d04d1f45a7b7c00b915311f786.png
[SouthEast 1]: /images/20210813/75eff426a0914cc59ca8f2c9fe5b7178.png
[SouthEast 2]: /images/20210813/de7b12d9869144e6b01d8fb618f34eae.png
[SouthEast 3]: /images/20210813/b2e047851133460d98727c4ae16e007d.png
[SouthEast 4]: /images/20210813/3519e9c6eb754a608da7c253b4e599cf.png