Koala 是一个前端预处理器语言图形编译工具，支持 Less、Sass、Compass、CoffeeScript，帮助web开发者更高效地使用它们进行开发。跨平台运行，完美兼容 windows、linux、mac。

Koala 具有哪些功能特性：

• 支持多语言：支持 LESS、SASS、CoffeeScript 和 Compass；
• 实时编译：监听文件，当文件改变时自动执行编译，这一切都在后台运行，无需人工操作；
• 编译选项：可以设置各个语言的编译选项；
• 代码压缩：Less 和 Sass 支持编译后自动压缩代码；
• 错误提示：在编译时如果遇到语法的错误，提供错误信息 log，方便开发者定位代码错误位置；
• 跨平台运行：可以在 Window、Linux和Mac OS X多个平台下完美运行。

创建项目

要让 Koala 来编译 SASS 项目，首要的条件就是要有 SASS 项目，。在自己的项目目录下先创建一个SASS项目，在这里我创建了一个名叫Sassdemo 的项目。同时创建一个 sass 的目录，把项目中的所以 .scss 文件放置在这个目录中：

Koala使用

Koala的使用其实非常的简单，第一步你启动您安装在本地的 Koala，你会看到一个很清爽的界面：

SASS界面编译工具——Codekit 的使用

整个界面包含的内容非常的简单，左上角有三个按钮：“添加项目”、“Error Log”和“配置”,在整个右边主内区域，默认是加载“项目”的界面。如下图所示。

添加项目

Koala添加SASS项目非常的简单，你可以点击面板左上角的+（添加）按钮，找到你的SASS项目，然后确认放进来：

此时你在Koala面板中，你可以看到已添加进来的Sass项目：

编译SASS项目

在前面几步，我们把koalaSass项目成功的添加到了Koala面板中，由于我们的 style.scss 文件里面还没有任何 SASS 代码，我们来试编辑一下，在 style.scss 文件中先加入下面的代码：

//This is sass file

$color: #888;
$bgColor: #f36;

header {
    color: $color;
    background-color: $bgColor;
}

保存你修改的 style.scss 文件。

见证神奇的时候到了，当你保存 style.scss 文件完成的那一刻，Koala 自动的帮你完成了 .scss 文件转译成 .css 文件，并且将转译出来的 .css 文件都放置在 css 目录下。