Koala 是一款由国人开发的开源预处理语言图形编译工具,目前已支持 Less、Sass、Compass 与CoffeeScript。
目前支持以下系统:Windows,Mac, 10.7+,Linux: 32bit / 64bit,Ubuntu: 32bit / 64bit;
我们可以从他们官方网站下载 koala:点击进入,使用文档点击进入
安装完成后打开 Koala,把文件夹拖入界面或者是在左侧加号处选择文件夹,此时在界面左边有文件夹路径产生。
同时有 less 文件将显示在界面中间,右键文件选择输出 CSS 文件的路径。
左键点击 less 文件在右边则有功能选项栏弹出,下面将介绍功能。
当开启自动编译时,使用编辑器按下 Ctrl+S 保存时,CSS 文档会自动更新。如果没有打开这个功能,那么需要使用者在自行点击"执行编译"才更新 CSS 文档。
调试信息(debug info):这个调试功能是在保存时自动检测有无错误,注意实时编译关闭时不会开启,需要在你执行时才弹出错误。所以,建议开启实时编译。目前调试功能仅能检测出一些影响编译的错误:例如没有带{}、没带分号。这些错误,而有没有使用选择器或者样式输入错误则不会提示。
输出方式(代码压缩):
在Node.js中安装LESS最简单的方式就是使用Node包管理工具npm来安装:
npm install -g less
如果你使用Mac或者Linux,可能需要使用管理员身份安装:
sudo npm install -g less
一旦安装完成,就可以在命令行中调用,例如:
lessc styles.less
这样的话编译后的CSS将会输出到stdout中,你可以选择将这个输出重定向到文件中:
lessc styles.less > styles.css
如果你想输出一个压缩后的CSS,只要加到-x
选项即可。如果你想要更NB的压缩,你也可以选择使用YUI CSS压缩器,只要加上--yui-compress
选项即可。
直接运行lessc,不带任何参数将可以看到所有的命令行参数。
你可以在Node中调用编译器,例如:
var less = require('less');
less.render('.class { width: (1 + 1) }', function (e, css) {
console.log(css);
});
将会输出
.class {
width: 2;
}
你也可以手工调用解析器和编译器:
var parser = new(less.Parser);
parser.parse('.class { width: (1 + 1) }', function (err, tree) {
if (err) { return console.error(err) }
console.log(tree.toCSS());
});
你可以给编译器传入一些参数:
var parser = new(less.Parser)({
paths: ['.', './lib'], // 指定@import搜索的目录
filename: 'style.less' // 为了更好地输出错误信息,可以指定一个文件名
});
parser.parse('.class { width: (1 + 1) }', function (e, tree) {
tree.toCSS({ compress: true }); // 压缩输出的CSS
});
你也可以直接在浏览器中使用LESS,详情请查看这里。