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效果。