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在命令行上使用,作为一个脚本文件浏览器或用于广泛的第三方工具下载。有关更多详细信息, 参见用法 部分。

安装

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

$ npm install -g less

在命令行中使用

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

$ lessc styles.less

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

$ lessc styles.less > styles.css

如果你想输出一个压缩后的CSS,只要加到‘-x’选项即可。如果你想要更NB的压缩,你也可以选择使用Clean CSS压缩器,只要加上"--clean-css"选项即可。

直接运行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({
    // 压缩输出的CSS
    compress: true
  });
});

第三方工具

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

在浏览器中使用LESSCSS

在浏览器中使用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>

特别注意

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

浏览器选项

你可以引入<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>

Learn more about Browser Options

Browser downloads

Download Less.js v1.7.1

Download source code

Get the latest Less.js source code by downloading it directly from GitHub.

Clone or fork via GitHub

Fork the project and send us a pull request!

Install with Bower

Install the Less.js project and JavaScript by running the following in the command line:

bower install less

Less CDN

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

Less.js is released under the Apache 2 License (though there are plans to dual license it). Copyright 2009-2014, Alexis Sellier and the Less Core Team (see about). Boiled down to smaller chunks, it can be described with the following conditions.

It allows you to:

  • Freely download and use Less.js, in whole or in part, for personal, company internal or commercial purposes
  • Use Less.js in packages or distributions that you create

It forbids you to:

  • Redistribute any piece of Less.js without proper attribution

It requires you to:

  • Include a copy of the license in any redistribution you may make that includes Less.js
  • Provide clear attribution to The Less Core Team for any distributions that include Less.js

It does not require you to:

  • Include the source of Less.js itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it
  • Submit changes that you make to Less.js back to the Less.js project (though such feedback is encouraged)

The full Less.js license is located in the project repository for more information.