lessc_入门 | Less.js 中文文档

使用 Less

Less可以通过npm在命令行上使用，作为一个脚本文件浏览器或用于广泛的第三方工具下载。有关更多详细信息， 参见 用法 部分。

Installation (安装)

在 node.js 中安装LESS最简单的方式就是使用Node包管理工具npm来安装:

$ npm install -g less

Command-line usage (在命令行中使用)

一旦安装完成，就可以在命令行中调用，例如:

$ lessc styles.less

这样的话编译后的CSS将会输出到 'stdout' 中，你可以选择将这个输出重定向到文件中:

$ lessc styles.less > styles.css

如果你想输出一个压缩后的CSS，只要加到 -x 选项即可。如果你想要更NB的压缩，你也可以选择使用 Clean CSS

压缩器，只要加上 --clean-css 插件即可。

直接运行lessc，不带任何参数将可以看到所有的命令行参数或 查看 用法.

Usage in Code (在代码中使用)

你可以在Node中调用编译器，例如：

var less = require('less');

less.render('.class { width: (1 + 1) }', function (e, output){

console.log(output.css);

});

将会输出

.class {

width: 2;

}

Configuration (配置)

你可以给编译器传入一些参数：

var less = require('less');

less.render('.class { width: (1 + 1) }',

{

paths: ['.', './lib'], // Specify search paths for @import directives

filename: 'style.less', // Specify a filename, for better error messages

compress: true // Minify CSS output

},

function (e, output){

console.log(output.css);

});

查看 用法 获取更多信息。

Third party tools (第三方工具)

有关其他工具详细信息,参见 用法 部分。

Command-line With Rhino (使用Rhino命令行)

每个 less.js 发布都包含了对应的Rhino命令行版本。

Rhino命令行版本需要两个文件:

less-rhino-.js - 编译启动，

lessc-rhino-.js - 命令行支持。

Command to run the compiler:

java -jar js.jar -f less-rhino-.js lessc-rhino-.js styles.less styles.css

This will compile styles.less file and save the result to styles.css file. The output file parameter is optional. If it is missing, less will output the result to stdout.

Client-side usage (在客户端中使用)

在浏览器中使用less.js开发是很好的，但不推荐用于生产环境中。

浏览器端使用是在使用LESS开发时最直观的一种方式。如果是在生产环境中，尤其是对性能要求比较高的场合，建议使用node或者其它第三方工具先编译成CSS再上线使用。

首先，引入 rel 属性的值是 stylesheet/less 的 .less 样式表 :

接下来，下载 less.js 并将其包涵在您的页面

元素的 标记中：

Tips 特别注意

确保包涵 .less 样式表在 less.js 脚本 before

当你引入多个 .less 样式表时，它们都是独立编译的。所以，在每个文件中定义的变量、混合、命名空间都不会被其它的文件共享。

Browser Options (浏览器端设置参数)

你可以引入 之前通过创建一个全局 less 对象的方式来指定参数，例如：

env: "development",

async: false,

fileAsync: false,

poll: 1000,

functions: {},

dumpLineNumbers: "comments",

relativeUrls: false,

rootpath: ":/a.com/"

};

或为了简化它们可以在 script 和 link 标记上设置属性(需要的JSON.parse浏览器支持或polyfill)。