Less 是一个Css 预编译器,意思指的是它可以扩展Css语言,添加功能如允许变量(variables),混合(mixins),函数(functions) 和许多其他的技术，让你的Css更具维护性，主题性，扩展性。

Less 可运行在 Node 环境,浏览器环境和Rhino环境.同时也有3种可选工具供你编译文件和监视任何改变。

例如:

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
  -webkit-box-shadow: @style @c;
  box-shadow:         @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

编译为：

.box {
  color: #fe33ac;
  border-color: #fdcdea;
}
.box div {
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

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-<version>.js lessc-rhino-<version>.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 样式表 :

<link rel="stylesheet/less" type="text/css" href="styles.less" />

接下来，下载 less.js 并将其包涵在您的页面 <head> 元素的 <script></script> 标记中：

<script src="less.js" type="text/javascript"></script>

Tips 特别注意

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

Browser Options （浏览器端设置参数）

你可以引入 <script src="less.js"></script> 之前通过创建一个全局 less 对象的方式来指定参数，例如：

<!-- set options before less.js script -->
<script>
  less = {
    env: "development",
    async: false,
    fileAsync: false,
    poll: 1000,
    functions: {},
    dumpLineNumbers: "comments",
    relativeUrls: false,
    rootpath: ":/a.com/"
  };
</script>
<script src="less.js"></script>

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

<script src="less.js" data-poll="1000" data-relative-urls="false"></script>
<link data-dump-line-numbers="all" data-global-vars='{ myvar: "#ddffee", mystr: "\"quoted\"" }' rel="stylesheet/less" type="text/css" href="less/styles.less">

更多浏览器端设置参数

Browser downloads

Download Less.js v2.2.0

Download source code

直接从 GitHub 上下载最新的 Less.js 源码。

Clone or fork via GitHub

通过 GitHub 克隆或 fork 本项目！

Install with Bower

通过运行下面的命令行安装Less.js项目和JavaScript：

bower install less

Less CDN

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.2.0/less.min.js"></script>

赋予你的权力：

任意下载并使用 Less.js 的全部或部分代码，可以用于个人、公司内部或商业目的
将 Less.js 包含到你的产品中

严禁：

在没有声明版权归属的情况下使用 Less.js 中的任何代码片段

你的义务：

如果你的产品中包含 Less.js，必须包含一份 Less.js 的版权协议
在你包含了 Less.js 的产品中明确声明 Less.js 的版权归 Less 核心小组

不需要：

在你的产品中包含 Less。js 自身或你所修改的源码
提交你对 Less.js 所做的修改到 Less.js 项目（我们还是鼓励提交对 Less.js 的改进）

完整的 Less.js 版权信息位于项目仓库内，请参考。

入门

入门

使用 Less