Less/Sass编译工具,koala使用指南
Koala是一个前端预处理器语言图形编译工具,是用于编译sass、less等的利器,考拉官网跨平台运行,完美兼容windows、linux、mac。
Koala特性
在介绍如何使用Koala之前,我们先简单的了解一下Koala具有哪些功能特性:
-
支持多语言:支持LESS、SASS、CoffeeScript和Compass;
-
实时编译:监听文件,当文件改变时自动执行编译,这一切都在后台运行,无需人工操作;
-
编译选项:可以设置各个语言的编译选项;
-
代码压缩:Less和Sass支持编译后自动压缩代码;
-
错误提示:在编译时如果遇到语法的错误,提供错误信息log,方便开发者定位代码错误位置;
看看考拉的界面
考拉.png我们分四个区域来看:
第一区域:第一个按钮用于添加项目,第二个按钮打开编译文件的错误提示,第三个按钮设置koala,里面可以设置所有文件默认的编译输出方式,需要过滤的文件,界面语言(中文/英文)等。当然这里也包括目前koala的版本号及作者等信息。
第二区域:project区域,可以直接把项目拖进该区域
第三区域:需编译的文件列表,默认以下划线开头的文件不出现列表中,绿色表示动态编译的文件,灰色表示非动态编译。单击相应的文件,出现第四个区块,设置文件编译的选项。如果你的文件是后添加的那么请点击上面的refresh按钮刷新需要编译的文件,当然也可以通过下面的几个all/less/sass/coffee来过滤自己要编译的文件。
第四区域:设置文件编译的选项,这个区域得选中第三个区域的某个需要编译的文件才会出现。以sass为例,第一个选项表示是否启用动态编译;第二组表示是否启用这四个功能,我这边为了方便调试所以启用debug info,当然如果你使用compass那就得启用compass;第三组表示输出的css格式,分为四种:nested,compressed,compact,expanded;最后一个compile按钮可以手动编译。
简单的使用步骤
第一步:首先点击我们第一区域的那个齿轮按钮,设置下默认文件的编译方式,并把界面语言设置为中文。
第二步:添加我们要编译的项目文件,可通过第一区域的加号那个按钮添加,也可以直接将项目拖到第二个project区域。
第三步:单击我们需要编译的文件,出现第四区域设置下该文件具体的编译方式,如果没什么特别的,直接用默认设置的就ok,如果不需要动态编译,直接勾掉“即时编译”那个checkbox,其余的按照上面说的操作。
第四步:右键单击需要编译的文件,出现我们常用的几个操作:打开文件,打开文件目录,打开输出文件目录,设置输出文件目录,编译,删除。一般这里我们需要设置下我们输出文件的目录。