前端编译工具Prepros

Prepros是一款非常好用的前端编程工具，Prepros支持的编译格式有很多种，包括Sass、Less、Stylus等。你可以通过这款软件轻松处理所有预处理语言，让编译变的更加简单。

功能特色：

1、编译简单：Prepros可以轻松编译 LESS、Sass、SCSS、Stylus、Jade、CoffeeScript、Haml和Markdown。

2、无依赖：你只要安装Prepros即可，无需安装Sass和Compass。

3、灵活的CSS注入：Prepros可以自动编译CSS并将其注入浏览器中，同样适用于HTML和JS。

4、内置HTTP服务器：没有多余文件URL限制，Prepros内置静态HTTP服务器来测试所有Ajax请求。

5、Background File Watch：Prepros会监视文件的变化，并实时编译。

6、错误通知：文件没有编译通过？别担心，Prepros将会自动报告错误。

使用说明：

下载安装成功后，打开Prepros 界面如图所示：

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

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

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

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

.mycolor {

    color: darkseagreen;

}

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

<link rel="stylesheet" href="assets/sass.css" />

写入标签脚本：

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

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

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