什么是LESS
Less是一个CSS的预编译器，意思是指它可以扩展CSS语言，添加功能如允许使用变量（variables）、混合（mixins）、函数（function）和其他的技术，让你的CSS更具有维护性，主体性、扩展性。
LESS的官方网站
http://www.lesscss.org/ http://www.lesscss.net/ http://less.bootcss.com
LESS中的注释
在Less中存在了两种注释：//和/**/。
1、//这种注释不会被编译到CSS文件中。
2、/**/以/**/包裹的注释会被编译到css的文件中
请记住：LESS文件只有在编译了之后才能被浏览器识别使用。
LESS的编译工具
我们主要介绍几款常有的：Koala、WinLess、CodeKit
当然好消息就是现在的web IDE（如HBuilder和WebStorm都是默认支持LESS和SASS等的编译的哦）
LESS的变量使用
我在CSS中我们是无法使用变量的，但是在less中我们可以使用变量来完成css的编写，这样的话，整个CSS就灵活多变了，我们可以将一些在CSS中多次出现的量可以定义成变量，这样我们在其他需要使用的地方引用这个定义的变量，注意LESS中变量的命名规范：
1、必须以@符号开头
2、中划线（-）和下划线一个意思（_），建议使用下划线，可以和js保存一致
3、命名有意义，让他人一看就知道该变量是干什么用的
1.将变量当做一个属性存在（不常用，也不建议使用）
2.作为URL存在这个倒是比较常用，因为我们在CSS中经常使用图片，而大型项目的图片和项目有可能分离，所以这个倒是常用的。
3.定义多个相同名称时(面试题)
@num:0;
.aaa{
@num:1;
.bbb{
@num:2;
cc :@num;
@num:3;}
dd:@num;}
注意：在LESS中当一个变量被多次赋值后，我们要看它的级别，越里层优先级别越高，那么cc应该是3（注意，不是2，LESS是编译型语言，不是在前面就一定先执行，会找同级别中最后的值），而dd的值应该是1，因为dd是aaa的子集，它不会继续往里面查找，只会查找同级别。
结果：
.aaa{
dd:1;
}
.aaa.bbb{
cc:3;
}
LESS的混合
在LESS中，我们可以引用已经定义好的样式，同样变量也可以运算的哦~~。
@charset"utf-8";
@b_width:10px;
.nav{
background:#FF5986;
border:@b_width solid #FA2659;
}
.content{
height:@b_width*2;//变量可以运算
color: red;
.nav//可以引用定义好的样式~~
}
在CSS中查看结果：
@charset"utf-8";
.nav{
background:#FF5986;
border:10pxsolid#FA2659;
}
.content{
height:20px;
color: red;
background:#FF5986;
border:10pxsolid#FA2659;
}
传参的使用
同样我们也可以通过传递参数的方式来完成LESS的调用。如
@bg_color: pink;
.border(@w){
border:@w solid @bg_color;
}
我们也可以定义一些样式，在引用样式时给样式传递参数，从而达到不同的修改，方便，快捷的对CSS进行各种操作。
LESS的嵌套
.content{
ul{
list-style:none;
li{
height:30px;
line-height:30px;
padding-left:20px;
background: url(img/arr.jpg)no-repeatcenterleft;
a{
text-decoration:none;
color:#535353;}}}}
在这段代码中我们的所有样式都是在content这个类中的，ul、li、a都是在其中，层次嵌套使用，最后得到我们想要的结果。
但是我们也说了，尽量不要去嵌套的太深，写的太多
LESS的函数
Less也为我们提供了大量的函数供我们使用，如：rgb、darken、lighten、fadein等
LESS的引入
@import less文件名称
使用引入可以再一个less文件中使用另外的less文件中的变量等。
LESS的条件表达式
>、>=、<、<=、=、true、false
.mixin(@a)when(lightness(@a)>=50%){
background-color: black;
}
.mixin(@a)when(lightness(@a)<50%){
background-color: white;
}
.mixin(@a){
color:@a;
}
.class1{.mixin(#7e7e7e)}
.class2{.mixin(#808080)}
LESS的循环
使用递归的方式实现循环。
.loop(@counter)when(@counter>0){
.loop((@counter-1));//递归调用自身4 3 2 1 0
width:(10px*@counter);//每次调用时产生的样式代码50px 40px 30px 20px 10px
}
div{
.loop(5);//调用循环
}
LESS的合并
//+合并以后，以逗号分割属性值
.mixin(){
box-shadow+:inset0010px#555;
}
.myclass{
.mixin();
box-shadow+:0020px black;}
//+_合并以后，以空格分割属性值
.a(){
background+:#f60;
background+_:url("/sss.jod");
background+:no-repeat;
background+_:center;
}
.myclass{
.a()
}
杂项函数
color、convert、data-uri、default
body{
background: data-uri('arr.jpg');
}
.x(2){
y:22;
}
.x(@x)when(default()){
z:@x;}
.div1{
.x(1);
}
.div2{
.x(123);}
