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
  });
});

第三方工具

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

在浏览器中使用

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

了解更多关于 浏览器选项

浏览器下载

下载 Less.js v1.7.1

下载源代码

从GitHub上获取 最新版本的Less.js 源代码

在GitHub上克隆或创建分支

创建项目分支 提交给我们新代码!

使用Bower安装

安装Less.js项目 和 JavaScript 通过运行以下命令行:

bower install less

Less CDN

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

Less.js 基于 Apache 2 许可证发布 (我们打算将来采用双许可证方式). 版权所有 2009-2015, Alexis Sellier 与 Less 核心小组 (详情请查看 关于). 归结为小块, 它可以用下面的几条进行说明:

准许:

  • 自由下载和使用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 许可证位于 项目资源库 用于了解更多信息.