什么是LESS
Less是一個(gè)CSS的預(yù)編譯器，意思是指它可以擴(kuò)展CSS語(yǔ)言，添加功能如允許使用變量（variables）、混合（mixins）、函數(shù)（function）和其他的技術(shù)，讓你的CSS更具有維護(hù)性，主體性、擴(kuò)展性。
LESS的官方網(wǎng)站
http://www.lesscss.org/? http://www.lesscss.net/? http://less.bootcss.com
LESS中的注釋
在Less中存在了兩種注釋：//和/**/。
1、//這種注釋不會(huì)被編譯到CSS文件中。
2、/**/以/**/包裹的注釋會(huì)被編譯到css的文件中
請(qǐng)記?。篖ESS文件只有在編譯了之后才能被瀏覽器識(shí)別使用。
LESS的編譯工具
我們主要介紹幾款常有的：Koala、WinLess、CodeKit
當(dāng)然好消息就是現(xiàn)在的web IDE（如HBuilder和WebStorm都是默認(rèn)支持LESS和SASS等的編譯的哦）
LESS的變量使用
我在CSS中我們是無法使用變量的，但是在less中我們可以使用變量來完成css的編寫，這樣的話，整個(gè)CSS就靈活多變了，我們可以將一些在CSS中多次出現(xiàn)的量可以定義成變量，這樣我們?cè)谄渌枰褂玫牡胤揭眠@個(gè)定義的變量，注意LESS中變量的命名規(guī)范：
1、必須以@符號(hào)開頭
2、中劃線（-）和下劃線一個(gè)意思（_），建議使用下劃線，可以和js保存一致
3、命名有意義，讓他人一看就知道該變量是干什么用的
1.將變量當(dāng)做一個(gè)屬性存在（不常用，也不建議使用）
2.作為URL存在這個(gè)倒是比較常用，因?yàn)槲覀冊(cè)贑SS中經(jīng)常使用圖片，而大型項(xiàng)目的圖片和項(xiàng)目有可能分離，所以這個(gè)倒是常用的。
3.定義多個(gè)相同名稱時(shí)(面試題)
@num:0;
.aaa{
@num:1;
.bbb{
@num:2;
cc :@num;
@num:3;}
dd:@num;}
注意：在LESS中當(dāng)一個(gè)變量被多次賦值后，我們要看它的級(jí)別，越里層優(yōu)先級(jí)別越高，那么cc應(yīng)該是3（注意，不是2，LESS是編譯型語(yǔ)言，不是在前面就一定先執(zhí)行，會(huì)找同級(jí)別中最后的值），而dd的值應(yīng)該是1，因?yàn)閐d是aaa的子集，它不會(huì)繼續(xù)往里面查找，只會(huì)查找同級(jí)別。
結(jié)果：
.aaa{
dd:1;
}
.aaa.bbb{
cc:3;
}
LESS的混合
在LESS中，我們可以引用已經(jīng)定義好的樣式，同樣變量也可以運(yùn)算的哦~~。
@charset"utf-8";
@b_width:10px;
.nav{
background:#FF5986;
border:@b_width solid #FA2659;
}
.content{
height:@b_width*2;//變量可以運(yùn)算
color: red;
.nav//可以引用定義好的樣式~~
}
在CSS中查看結(jié)果：
@charset"utf-8";
.nav{
background:#FF5986;
border:10pxsolid#FA2659;
}
.content{
height:20px;
color: red;
background:#FF5986;
border:10pxsolid#FA2659;
}
傳參的使用
同樣我們也可以通過傳遞參數(shù)的方式來完成LESS的調(diào)用。如
@bg_color: pink;
.border(@w){
border:@w solid @bg_color;
}
我們也可以定義一些樣式，在引用樣式時(shí)給樣式傳遞參數(shù)，從而達(dá)到不同的修改，方便，快捷的對(duì)CSS進(jìn)行各種操作。
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這個(gè)類中的，ul、li、a都是在其中，層次嵌套使用，最后得到我們想要的結(jié)果。
但是我們也說了，盡量不要去嵌套的太深，寫的太多
LESS的函數(shù)
Less也為我們提供了大量的函數(shù)供我們使用，如：rgb、darken、lighten、fadein等
LESS的引入
@import less文件名稱
使用引入可以再一個(gè)less文件中使用另外的less文件中的變量等。
LESS的條件表達(dá)式
>、>=、<、<=、=、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的循環(huán)
使用遞歸的方式實(shí)現(xiàn)循環(huán)。
.loop(@counter)when(@counter>0){
.loop((@counter-1));//遞歸調(diào)用自身4 3 2 1 0
width:(10px*@counter);//每次調(diào)用時(shí)產(chǎn)生的樣式代碼50px 40px 30px 20px ?10px
}
div{
.loop(5);//調(diào)用循環(huán)
}
LESS的合并
//+合并以后，以逗號(hào)分割屬性值
.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()
}
雜項(xiàng)函數(shù)
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);}
