Less和Sass编译

2022-08-30 19:55:59

使用koala编译

Koala 是一款由国人开发的开源预处理语言图形编译工具，目前已支持 Less、Sass、Compass 与CoffeeScript。

目前支持以下系统：Windows，Mac, 10.7+，Linux: 32bit / 64bit，Ubuntu: 32bit / 64bit；

我们可以从他们官方网站下载 koala：点击进入,使用文档点击进入

使用方法：

安装完成后打开 Koala，把文件夹拖入界面或者是在左侧加号处选择文件夹，此时在界面左边有文件夹路径产生。
同时有 less 文件将显示在界面中间，右键文件选择输出 CSS 文件的路径。
左键点击 less 文件在右边则有功能选项栏弹出，下面将介绍功能。

功能介绍：

自动编译（实时编译）：

当开启自动编译时，使用编辑器按下 Ctrl+S 保存时，CSS 文档会自动更新。如果没有打开这个功能，那么需要使用者在自行点击"执行编译"才更新 CSS 文档。

编译选项：

行注释（line comments）：这个功能会在 css 文件里对应的 less 编译出来的 css 代码上方提供一个注释。注释的内容分别说明来自 less 的第几行开始，同时标明是来自那个 less 文件。
调试信息（debug info）：这个调试功能是在保存时自动检测有无错误，注意实时编译关闭时不会开启，需要在你执行时才弹出错误。所以，建议开启实时编译。目前调试功能仅能检测出一些影响编译的错误：例如没有带{}、没带分号。这些错误，而有没有使用选择器或者样式输入错误则不会提示。
输出方式（代码压缩）：
- 正常（normal）：顾名思义，就是不压缩。
- 压缩（compress）：顾名思义，就是压缩。
- YUI压缩（YUIcompress）：使用 YUI 的压缩打包工具进行压缩。

Node.js命令行中使用

安装

在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.js代码中使用

你可以在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，详情请查看这里。

码农公寓