技多不压身，不断尝试新知识、新技术才能有所提高，任何一门技术的掌握都是由浅入深的，所以不要逃避新技术，有开始，持之以恒，慢慢会发现比原来懂了很多。这是讲在前面的话，好了，开始进入主题。
知识体系：
- less概括
- 如何使用less
- 导入（Importing）
- 变量（Variables）
- 嵌套（Nested Rules）
- 混合（Mixins）
- 继承/扩展（Extend）
- 运算（Operations）
- 命名空间和访问器（Namespaces and Accessors）
- 作用域（Scope）
- 父选择器（Parent Selectors）
- 循环（Loops）
- 合并（Merge）
- 函数（Functions）
1、less概括
Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。less文件后缀是.less，less只有被编译后才能被浏览器识别使用。less之于css，可以理解为typescript之于JavaScript。
2、如何使用less
- 通过npm在命令行运行
$ npm install -g less
$lessc style.less style.css
- 在浏览器上作为脚本文件下载
通过link标签引入less文件
<link rel="stylesheet/less" type="text/css" href="styles.less" />
接下来通过script标签引入less.js文件
<script src="less.js" type="text/javascript"></script>
- 集成在第三方工具内
3、导入（Importing）
用于导入LESS或CSS文件的内容。如果导入的是less文件，可以将.less后缀省略。如：
@import "library"; // library.less
@import "typo.css";
4、变量（Variables）
变量的作用就是把值定义在一个地方，然后在各处使用，这样能让代码更易维护，变量名以“@”开始，通过“:”赋值。 变量是懒加载的，也就是说你可以在变量定义之前使用变量。 如：
@color1: #ca428b;
.div1{
background-color : @color1;
}
.div2{
background-color : @color1;
}
编译为css:
.div1 {
background-color: #ca428b;
}
.div2 {
background-color: #ca428b;
}
5、嵌套（Nested Rules）
模仿html结构，让css代码更加简洁明了清晰。如：
.container{
h1{
font-size: 25px;
color:#E45456;
}
.myclass{
h1{
font-size: 25px;
color:#E45456;
}
}
}
.container h1 {
font-size: 25px;
color: #E45456;
}
.container .myclass h1 {
font-size: 25px;
color: #E45456;
}
6、混合（Mixins）
把某个选择器中的样式拿过来使用，less中的内容比较多，这里只做简单介绍。
.a(){ //放置括号后在输出中消失
padding-left: 100px;
}
.myclass{
background : #64d9c0;
.a;
}
编译为css:
.myclass{
background : #64d9c0;
padding-left: 100px;
}7、继承/扩展（Extend）
虽然在上述的案例中，.myclass把.a中的样式继承了过来，但是原理却是把代码copy一份过来，这样编译后的CSS中依然会存留大量的冗余CSS代码，为了避免这一点，我们可以使用extend伪类来实现样式的继承使用。如：
.img{
font-size: 45px;
font-style: italic;
}
.style,
.container:extend(.img){
background: #BF70A5;
}编译为css:
.img,
.container {
font-size: 45px;
font-style: italic;
}
.style,
.container {
background: #BF70A5;
}8、运算（Operations）
可以对数字、颜色值、变量进行+, -, *, /操作。如：
@base: 5%;
@filler: @base * 2; // 10%
@other: @base + @filler; // 15%9、命名空间和访问器（Namespaces and Accessors）
在LESS的语法中，我们可以指定命名空间，实现在一个盒子中层级嵌套式的编写。下面案例中，调取.class3样式需要.class1 > .class2>.class3。如：
.class1 {
.class2 {
.class3 {
color:green;
}
}
}
.myclass {
.class1 > .class2 > .class3;
}.class1 .class2 .class3 {
color: green;
}
.myclass {
color: green;
}10、作用域（Scope）
less中的作用域与编程语言中的作用域概念非常相似，首先会在局部查找变量和混合。如果没找到，编译器就会在父作用域中查找，依次类推。如：
@clolor:#ffffff;
.bgcolor{
width: 50px;
@clolor:#cccccc;
a{
color: @clolor; //#cccccc
}
}编译为css:
.bgcolor {
width: 50px;
}
.bgcolor a {
color: #cccccc;
}11、父选择器（Parent Selectors）
使用＆(和号)运算符来引用父选择器。 嵌套规则的父选择器由＆运算符表示，并在将修改类或伪类应用于现有选择器时使用。
.select {
& + & {
color: #A9F5F2;
}
}编译为css:
.select + .select {
color: #A9F5F2;
}12、循环（Loops）
在less中，混合可以调用它自身，这样，当一个混合递归调用自己，再结合Guard表达式和模式匹配这两个特性，就可以写出循环结构.如：
.loop(@counter) when (@counter > 0) {
.loop((@counter - 1)); // 递归调用自身 3 2 1
width: (10px * @counter); // 每次调用时产生的样式代码30px 20px 10px
}
div {
.loop(3); // 调用循环
}编译为css:
div{
width: 30px;
width: 20px;
width: 10px;
}13、合并（Merge）
在需要合并的属性后加上+，合并后属性值以“,”隔开。如：
.myfunc() {
box-shadow+: 5px 5px 5px grey;
}
.class {
.myfunc();
box-shadow+: 0 0 5px #f78181;
}编译为css:
.class {
box-shadow: 5px 5px 5px grey, 0 0 5px #f78181;
}14、函数（Functions）
Less提供了许多用于转换颜色，处理字符串和进行算术运算的函数。
.bgcolor{
background :rgb(0,133,0) ;
z-index: blue(#050506);
}编译为css:
.bgcolor{
background :#008500;
z-index: 6;
}
