Less 详解
Less 是一种 CSS 预处理语言，它扩展了 CSS 语言，增加了诸如变量、混合、函数等功能，让 CSS 更易维护、具有逻辑性，能像编程一样编写 CSS 代码。
Less 的安装
服务器端安装：可以通过 npm（node.js 的包管理器）安装 Less，只需在命令行上输入 `$ npm install -g less` 即可安装成功。安装完成后，可以使用 Less 编译器，如 `$ lessc styles.less`，这将输出编译后的 CSS 代码到 stdout。也可以将输出重定向到一个文件，例如 `$ lessc styles.less > styles.css`。
客户端安装：可以在 HTML 中添加 `<link rel="stylesheet/less" type="text/css" href="styles.less" />`，然后下载 less.js 并将其引入 `<head>` 元素内，例如 `<script src="less.js" type="text/javascript"></script>`。
Less 导入语法
可以使用 `@import` 语句导入外部 Less 文件，例如 `@import "lib.less";` 或 `@import "lib";`。如果想导入一个 CSS 文件，并且不想 LESS 对其进行处理，只需要使用 `.css` 后缀，例如 `@import "lib.css";`。
Less 注释
Less 支持 CSS 风格的注释，例如 `/* Hello, I'm a CSS-style comment */`。同时，Less 也支持双斜线的注释，但是编译成 CSS 的时候自动过滤掉。
Less 变量
可以使用 `@` 符号定义变量，例如 `@color: red;`。然后，可以在 Less 代码中使用该变量，例如 `#header { color: @color; }`。输出结果为 `#header { color: red; }`。
Less 混合模式
Less 提供了混合模式，允许定义一组样式并且可以在其他样式中调用。例如，可以定义 `.bordered { border-top: dotted 1px black; border-bottom: solid 2px black; }`，然后在其他样式中调用，例如 `#menu a { color: #111; .bordered; }`。输出结果为 `#menu a { color: #111; border-top: dotted 1px black; border-bottom: solid 2px black; }`。
Less 带参数混合模式
Less 也支持带参数的混合模式，例如 `.border-radius (@radius: 5px) { border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; }`。然后，可以在其他样式中调用，例如 `#header { .border-radius; }`。输出结果为 `#header { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }`。
Less 不暴露的混合模式
Less 还支持不暴露的混合模式，例如 `.wrap () { text-wrap: wrap; white-space: pre-wrap; white-space: -moz-pre-wrap; word-wrap: break-word; }`。然后，可以在其他样式中调用，例如 `pre { .wrap }`。输出结果为 `pre { text-wrap: wrap; white-space: pre-wrap; white-space: -moz-pre-wrap; word-wrap: break-word; }`。
Less 模式匹配
Less 支持模式匹配，例如 `.mixin (dark, @color) { color: darken(@color, 10%); }`。然后，可以在其他样式中调用，例如 `.mixin (dark, @color) { color: darken(@color, 10%); }`。输出结果为 `color: darken(@color, 10%);`。
