Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。
Less 可以运行在 Node、浏览器和 Rhino 平台上。网上有很多第三方工具帮助你编译 Less 源码。
一、前言
说到前端构建怎能缺少CSS预处理器呢！其实CSS的预处理器有很多啦，比较出名的有Scss、Sass、Stylus和Less。（最近还听说出现了Autoprefixer等CSS后处理器，可参考@一丝的PPT）
众多CSS预处理器中Less的语法最接近原生CSS，因此相对来说更容易上手，假如有JS、C#等编程经验的话，其实上述的几种预处理器的学习成本也不会特别高。下面是我们这阵子的学习笔记，以便日后查阅。
最好的入门教程——官网地址：http://lesscss.org/
最佳实践之一——Bootstrap
由于内容较多，特设目录一坨：
二、搭建学习环境
三、内联样式和外联样式
四、语法
1. 注释
2. 变量（Variable）
列表类型
3. 嵌套（Nested）
4. 父选择器引用（ParentSelector）
5. 导入指令（Import）
6. 继承（Extend）
7. 混合（Mixin）
8. 选择、循环作业控制
五、运算符
六、函数
七、通过Lessc将Less引入开发环境
八、实战一下
九、与Grunt结合
十、总结
二、搭建学习环境
搭建Less的学习环境非常简单，只需在</body>标签前通过<script type="text/javascript" src="less.js"></script>引入处理器即可实现浏览器端中将less预编译为css样式。更有效的方式是通过如下代码监测less样式，自动编译为css样式，从而减少我们修改less代码后需按F5后才看到实际效果的繁琐步骤。
<script>less = { env: 'development'};</script>
<script src="less.js"></script>
<script>less.watch();</script>
</div>
三、内联样式和外联样式
基于我们现在使用的是浏览器端进行预编译，因此Less可用于内联样式和外联样式当中。
内联样式如下：
<style type="text/less"> // less 代码 </style></div>
外联样式引入如下：
<link rel="stylesheet/less" type="text/css" href="文件.less" rel="external nofollow" /></div>
四、语法
1. 注释
// 单行注释，不会作为最终输出 /* 多行注释，以原生CSS的/*注释....*/形式作为最终输出 */</div>
2. 变量(Variable)
Less中的变量有以下规则：
- 以@作为变量的起始标识，变量名由字母、数字、_和-组成
- 没有先定义后使用的规定；
- 以最后定义的值为最终值；
- 可用于rule值、rule属性、rule属性部件、选择器、选择器部件、字符串拼接；
- 定义时 "@变量名: 变量值;" 的形式；引用时采用 "@变量名" 或 "@{变量名}" 的形式；
- 存在作用域，局部作用域优先级高于全局作用域。
Less源码：
@color: color;
@dialog: .dialog;
@suffix: fix;
// 空格将被忽略，若要保留空格则需要使用单引号或双引号
@hi: 'hello ';
@dear: there ;
.dialog{
// 用于 rule属性部件，必须使用"@{变量名}" 的形式
background-@{color}: #888;
// 用于 rule属性，必须使用"@{变量名}" 的形式
@{color}: blue;
}
// 用于 选择器，必须使用"@{变量名}" 的形式
@{dialog}{
width: 200px;
}
@{dialog}::after{
content: ': @{hi}@{dear}!'; // 用于 字符串拼接，必须使用"@{变量名}" 的形式
}
@h: 1000px;
// 用于 选择器部件，必须使用"@{变量名}" 的形式
.ie-@{suffix}{
@h: 30px; // 存在作用域，局部作用域优先级高于全局作用域。
height: @h; // 用于 属性值，两种形式均可使用
line-height: 30px;
}
// 1. 以@作为变量的起始标识，变量名由字母、数字、_和-组成
// 2. 没有先定义后使用的规定；
@dialog-border-color: #666;
@dialog-border-width: 10px;
@dialog-border-width: 1px; // 3. 以最后定义的值为最终值；
</div>
最终输出：
.dialog {
background-color: #888;
color: blue;
}
.dialog {
width: 200px;
}
.dialog::after {
content: ': hello there!';
}
.ie-fix {
height: 30px;
line-height: 30px;
}
</div>
列表类型
less变量除了支持#FFF，12px，12，test等单值类型外，还支持列表类型，通过内置函数extract通过索引获取列表元素，通过内置函数length获取列表的元素个数
@colors: #FFF, #0F0, #F0F;
.skin{
color: extract(@colors, 0);
height: 12px * length(@colors);
}
</div>
最终输出：
.skin{
color: #FFF;
height: 36px;
}
</div>
3. 嵌套(Nested)
Less源码：
.main{
padding: 10px;
> div {
width: 100px;
}
.aside {
width: 200px;
}
}
</div>
最终输出：
.main {
padding: 10px;
}
.main > div {
width: 100px;
}
.main .aside {
width: 200px;
}
</div>
4. 父选择器引用(ParentSelector)