什么是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);}
