LESS css的预处理语言

快速入门

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
Less 可以运行在 Node 或浏览器端。

例子：

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

使用方法

通过npm可以在命令行上使用更少的工具，可以下载为浏览器的脚本文件，也可以在各种第三方工具中使用。

安装

在服务器上安装较少的最简单的方法是通过npm安装：

$ npm install -g less

命令行用法

一旦安装完毕，您就可以从命令行调用编译器了：

$ lessc styles.less

这将输出已编译的CSS到stdout。将CSS结果保存到您选择的文件中：

$ lessc styles.less styles.css

为了减少输出，你可以使用CSS插件。在安装插件时，将使用一个简洁的CSS选项指定一个微型CSS输出:

$ lessc --clean-css styles.less styles.min.css

要查看所有命令行选项，可以不使用参数或查看使用情况。

代码用法

您可以从节点调用编译器：

var less = require('less');

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

输出：

.class {
  width: 2;
}

配置

您可以向编译器传递一些选项：

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

浏览器端用法

使用less.js在浏览器中很适合开发，但不推荐用于生产。

客户端是最简单的入门方法，它可以更少地开发，但在生产中，当性能和可靠性很重要时，我们建议使用node.js或其中一个可用的第三方工具进行预编译。
首先，链接你的 .less 将rel属性设置为 "stylesheet/less" 的样式表：

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

接下来,下载 less.js 并将其包含在一个<script> </script> 标签的 <head> 元素的页面：

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

下载

下载 Less.js v2.5.3

下载源代码

通过GitHub克隆或分支

CDN

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

LESS笔记

LESS笔记源码