怎么使用LessSass编译工具koala

一、SASS调试插件的方法

如需调试功能，请在编译输出的时候输出debug信息，那样解析的css文件中就会包含debug信息，然后通过firebug或谷歌的调试工具就可以定位到我们编辑的scss文件，而不是解析后的css文件。

如果光做好SASS的准备工作还不够，还需要让浏览器支持SASS。那么就需要一个浏览器的插件才能让浏览器识别SASS，从而方便开发人员进行开发。

如需调试功能，请在编译输出的时候输出debug信息，那样解析的css文件中就会包含debug信息，然后通过firebug或谷歌的调试工具就可以定位到我们编辑的scss文件，而不是解析后的css文件。(如图1-1)

图1-1

如果你的css文件中没有以@media -sass-debug-info开头的代码，说明没有输出debug信息。请重新使用koala工具编译你的scss文件，并确定已经勾选了debug信息这个选项。

在火狐中调试，只需要再下载FireSass→即可。

二、编译工具koala的安装

1、进入页面

2、根据系统下载所需要的koala的版本

3、然后在下载文件夹中安装下载的EXE文件，即可安装成功

三、编译工具koala的优点

1、多语言支持：支持Less、Sass、CoffeeScript 和 Compass Framework。

2、实时编译：监听文件，当文件改变时自动执行编译，这一切都在后台运行，无需人工 *** 作。

3、编译选项：既可统一设置文件的编译选项，也可单独设置某个文件的编译选项。

4、强大的文件右键功能：右键文件元素，即可 *** 作打开文件，打开文件目录，打开输出文件目录，设置输出文件目录，编译，删除六大常用功能。

5、错误提示：在编译时如果遇到语法的错误，koala将在右下角d出错误信息，方便开发者定位代码错误位置。

6、跨平台：windows、linux、mac都能完美运行。

7、免费且负责：koala完全免费，而且作者很负责，有什么问题作者都会及时给予答复，意见什么的可以直接提交给作者，一般在下一个版本就能得到解决。

打包一个文件，只需要常规的在入口的js文件引用 css文件即可， 打包成多个CSS文件，可以设置多个CSS入口，让webpack用 loader去打包。 和分割单独打包js文件一样。下面有两个例子。【例子来源】 // 使用webpack 打包单独的postcss语法的css文件

---