Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。
Less 可以运行在 Node、浏览器和 Rhino 平台上。网上有很多第三方工具帮助你编译 Less 源码。
说到前端构建怎能缺少CSS预处理器呢！其实CSS的预处理器有很多啦，比较出名的有Scss、Sass、Stylus和Less。（最近还听说出现了Autoprefixer等CSS后处理器，可参考@一丝的PPT）
众多CSS预处理器中Less的语法最接近原生CSS，因此相对来说更容易上手，假如有JS、C#等编程经验的话，其实上述的几种预处理器的学习成本也不会特别高。下面是我们这阵子的学习笔记，以便日后查阅。
最佳实践之一——Bootstrap
由于内容较多，特设目录一坨：
搭建Less的学习环境非常简单，只需在
基于我们现在使用的是浏览器端进行预编译，因此Less可用于内联样式和外联样式当中。
内联样式如下：
外联样式引入如下：
Less中的变量有以下规则：
Less源码：
// 1. 以@作为变量的起始标识，变量名由字母、数字、_和-组成
// 2. 没有先定义后使用的规定；
@dialog-border-color: #666;
@dialog-border-width: 10px;
@dialog-border-width: 1px; // 3. 以最后定义的值为最终值；
最终输出：
less变量除了支持#FFF，12px，12，test等单值类型外，还支持列表类型，通过内置函数extract通过索引获取列表元素，通过内置函数length获取列表的元素个数
最终输出：
Less源码：
最终输出：
Less源码：
最终输出：
less样式文件可通过 @import '文件路径'; 引入外部的less文件。
注意：
不带扩展名或带非.less的扩展名均被视为less文件; @import可出现在任何位置，而不像css的@import那样只能放在文件第一行。
另外@import还提供了6个可选配置项(分别为reference,inline,less,css,once,multiple)，用来改变引入文件的特性。语法为： @import (reference) '文件路径'; 。下面为各配置项的具体说明：
1. @import (reference) "文件路径";
将引入的文件作为样式库使用，因此文件中样式不会被直接编译为css样式规则。当前样式文件通过extend和mixins的方式引用样式库的内容。
2. @import (inline) "文件路径";
用于引入与less不兼容的css文件，通过inline配置告知编译器不对引入的文件进行编译处理，直接输出到最终输出。注意：引入的文件和当前文件会被编译为一个样式样式
3. @import (less) "文件路径";
默认使用该配置项，表示引入的文件为less文件。
4. @import (css) "文件路径";
表示当前操作为CSS中的@import操作。当前文件会输出一个样式文件，而被引入的文件自身为一个独立的样式文件
5. @import (once) "文件路径";
默认使用该配置项，表示对同一个资源仅引入一次。
6. @import (multiple) "文件路径";
表示对同一资源可引入多次。
有两种语法形式，
Less源码：
最终输出：
注意事项：
6.1. 父选择器必须严格匹配，除了属性选择器中属性值引号不必匹配外，或添加all关键字外。 Less源码：
最终输出：
6.2. 父选择器不支持变量形式
Less源码：
// 匹配成功
.son2:extend(.parent1){}
@s3: son3;
.@{s3}:extend(.parent1){}
最终输出：
6.3. media query影响继承的作用域
6.3.1. media query内的extend操作，仅能继承当前块的其他选择器样式。
注意：不能extend当前media query块内部的子media query块中的选择器样式；但可以extend父media query块的选择器样式。
Less源码：
最终输出：
6.3.2. 非media query内的extend操作，将会继承所有media query中匹配的选择器样式。
Less源码：
最终输出：
6.4. 增强的mixin定义mixin时仅能使用类选择器和ID选择器，而extend操作可对应所有的选择器，因此当没有动态入参而又需要类选择器和ID选择器以外的选择器时，可使用extend来实现mixin的功能。
Mixin相当于macro，会将样式规则内联到调用的位置中。而Less中的mixin有以下的注意点：
7.1. 类选择器、ID选择器自动被定义为mixin，而且具有命名空间； Less源码：
最终输出：
7.2. 显示定义不带参数和带参数的样式库(mixin库)，不会输出到最终输出中，仅供调用；
Less源码：
最终输出：
7.3. mixin内置两个特殊的对象 @arguments 和 @reset 。@arguments代表mixin的所有入参,而@reset代表mixin的...入参数组。
Less源码：
最终输出：
7.4. mixin的重载可定义多个同名mixin，调用时只要参数数量匹配则会执行相应的mixin。
Less源码：
最终输出：
Less中通过混合（Mixin）后的when关键字来提供选择的作业控制，通过递归来实现循环的作业控制。
Less源码：
// 通过递归实现循环
.generate-columns(4);
.generate-columns(@n,@i: 1) when (@i =< @n) {
.column-@{i} {
width: (@i * 100% / @n);
}
.generate-columns(@n,(@i + 1));
}
最终输出：
Less还支持+、-、*、/运算符。但对单位不一致的运算数进行运算要注意以下两点：
1. 运算数与运算符间必须用空格分隔；
2. 以第一个运算数的单位作为运算结果的单位；
Less源码：
@success2: 2px + 1em;
.success2{
height: @success2;
}
最终输出：
.success2{
height: 3em;
}
Less为我们提供了一个功能强大的内置函数库，其中绝大部分为颜色处理函数。下面着重介绍Misc Function中的default函数、String Function中的escape函数和颜色处理函数。
1. default函数
示例：
.son{
.person(10);
}
.daughter{
person(17);
}
.father{
.person(27);
}
最终输出：
虽然上述示例逻辑上不合理。但可以看出default函数用于条件控制当中，充当else或switch语句中default的角色。
通过官网提供的综合示例我们可以更好理解它的用法：
// 最终输出
.x-blue {
case-2: #00008b;
}
.x-green {
default-color: #008000;
}
.x-foo {
case-1: I am 'foo';
}
.x-baz {
default-string: and I am the default;
}
1. default函数必须在条件控制语句当中使用；
2. default函数可实现比else更复杂的功能，如下：
div-2 {
/ ... /
.mixin(100%);
}
// 最终输出：
div-1 {
width: 100px;
padding: 20px;
}
div-2 {
/ ... /
}
顾名思义就是对字符串中的特定字符进行编码，该函数将对\
颜色处理函数又分为四大类：颜色定义函数(Color Definition)、颜色通道值获取函数(Color Channel)、颜色通道值修改函数(Color Operation Function)、混色函数(Color Blending)。
这里仅仅介绍常用的lighten和darken函数。
lighten(color,amount) ，color为颜色，amount为增加的亮度值，取值范围为0-100%。
darken(color,amount) ，color为颜色，amount为减少的亮度值，取值范围为0-100%。
到这里我想大家已经对Less有一定程度的了解，并希望在将其加入你的开发工具包中。但通过less.js将Less解析器引入到浏览器肯定是不适合开发的，而cli工具lessc更适合开发环境中使用。在使用之前我们先要通过npm来安装less。
npm install -g less
然后我们就可以通过 lessc [option option=parameter ...]
lessc的option选项较多，我将主要的选项分为lessc命令信息相关、sourcemap相关、@import指令相关和插件相关四类。
lessc -h ，获取lessc命令的帮助信息；
lessc -v ，获取lessc命令的版本号。
由于在浏览器直接查看和操作的是CSS样式规则，而我们开发时使用的Less代码，这会导致难以找到CSS样式规则所对应的Less代码从而增大调试难度。而sourcemap就是为了解决这一痛点而提出的技术解决方案，其原理就是通过一个map文件来保存两个文件中代码的对应关系，然后支持sourcemap的浏览器的devTools中就会根据这些对应关系来定位相应的Less代码。（Chrome和FF均支持sourcemap，IE11及以下均不支持）
若对sourcemap不太了解的可以参考《前端构建：Source Maps详解》
--source-map ，生成与生成的css同名的sourcemap文件（例如生成的css文件为main.css，那么sourcemap文件就是main.css.map），且与css文件位于同一目录下；
--source-map=
--source-map-rootpath=
lessc --source-map --source-map-rootpath=../../src/less/main.less src/less/main.less bin/style/main.css
--source-map-map-inline ，以data URI Scheme的形式将sourcemap文件内容内嵌到css文件中。
--source-map-url=
--include-path=
--relative-urls 或 -ru ，用于保持样式库中的图片等资源的相对路径。示例：
不使用该选项时：
使用该选项时：
lessc以插件的形式来增强其功能，下面仅介绍clean-css插件，其他插件请参考http://lesscss.org/usage/#plugins-list-of-less-plugins
clean-css插件用于压缩css文件（less-plugin-clean-css@github）
首先通过npm安装插件 npm install -g less-plugin-clean-css ，然后通过--clean-css选项来启动CSS压缩功能。
如： lessc file.less --clean-css="--s1 --advanced --compatibility=ie8"
先假定我们开发环境的目录结构如下（灰色表示文件由构建工具生成）：
sample
|-- build.bat 构建工具
|-- lib 第三方依赖库
| |-- less
| |-- base.less
| |-- img
| |-- nav.png
|-- src 源码
| |-- less
| | |-- main.less
| |-- index.html
|-- bin 编译后的文件
| |-- style
| |-- main.css
| |-- main.css.map
| |-- index.html
|-- dist 发布文件
|-- lib
| |-- less
| |-- img
| |-- nav.png
|-- app
|-- style
| |--main.css
|-- index.html