一、LESS的基本使用
經(jīng)過上述介紹，我們知道Less屬于預(yù)處理器 可以簡(jiǎn)單理解Less其實(shí)就是CSS的擴(kuò)展語言食铐，它增加了一些CSS原本沒有的東西，如變量僧鲁、混合（mixin）虐呻、函數(shù)等功能象泵，讓CSS`變得更容易書寫和維護(hù)
1.變量
Less可以使用一個(gè)變量，需要配合@斟叼，并且支持表達(dá)式
@width:10px;@height:@width+10px;#header{width:@width;height:@height;}
編譯成：
#header{width:10px;height:20px;}
2.混入Mixins
Mixins常常用于將一組通用的屬性混合到另一個(gè)需要的地方偶惠，混入時(shí)需要配合()使用
.bordered{border-top:dotted 1px black;border-bottom:solid 2px black;}#menu a{color:#111;.bordered();}.post a{color:red;.bordered();}
編譯成
.bordered{border-top:dotted 1px black;border-bottom:solid 2px black;}#menu a{color:#111;border-top:dotted 1px black;border-bottom:solid 2px black;}.post a{color:red;border-top:dotted 1px black;border-bottom:solid 2px black;}
3.嵌套Nesting
Less書寫的代碼更加簡(jiǎn)潔，模仿了HTML的組織結(jié)構(gòu)朗涩，例如以前
#header{color:black;}#header .navigation{font-size:12px;}#header .logo{width:300px;}
使用Less
#header{color:black;.navigation{font-size:12px;}.logo{width:300px;}}
另外忽孽，在Less內(nèi)，&可以表示當(dāng)前選擇器的父級(jí)
4.運(yùn)算符
Less支持+谢床、-兄一、*、/算術(shù)運(yùn)算符，可以對(duì)任何數(shù)字、顏色或變量進(jìn)行運(yùn)算
需要注意：算術(shù)運(yùn)算符在加谓着、減或比較之前會(huì)進(jìn)行單位換算。計(jì)算的結(jié)果以最左側(cè)操作數(shù)的單位類型為準(zhǔn)骂束。如果單位換算無效或失去意義，則忽略單位成箫。無效的單位換算例如：px到cm或rad到%的轉(zhuǎn)換
// 所有操作數(shù)被轉(zhuǎn)換成相同的單位@conversion-1:5cm+10mm;// 結(jié)果是 6cm@conversion-2:2-3cm-5mm;// 結(jié)果是 -1.5cm// conversion is impossible@incompatible-units:2+5px-3cm;// 結(jié)果是 4px// example with variables@base:5%;@filler:@base*2;// 結(jié)果是 10%@other:@base+@filler;// 結(jié)果是 15%//對(duì)顏色的計(jì)算@color:#224488/2;//結(jié)果是 #112244background-color:#112244+#111;// 結(jié)果是 #223355
另外展箱，乘法和除法不作轉(zhuǎn)換
@base:2cm*3mm;// 結(jié)果是 6cm
5.轉(zhuǎn)義Escaping
Less可以使用使用任意字符串作為屬性或變量值，前提是格式：~"anything"或~'anything'
@min768:~"(min-width: 768px)";.element{@media @min768{font-size:1.2rem;}}
編譯為
@media(min-width:768px){.element{font-size:1.2rem;}}
6.函數(shù)Functions
Less內(nèi)置了非常多的函數(shù)蹬昌，用于轉(zhuǎn)換顏色析藕、處理字符串、算術(shù)運(yùn)算等
@base:#f04615;@width:0.5;.class{width:percentage(@width);// returns `50%`color:saturate(@base,5%);background-color:spin(lighten(@base,25%),8);}
這個(gè)例子利用percentage函數(shù)將 0.5 轉(zhuǎn)換為 50%凳厢，利用saturate將顏色飽和度增加 5%账胧，以及利用lighten將顏色亮度降低 25% 并且利用spin將色相值增加 8
7.命名空間和訪問符
有時(shí)，出于組織結(jié)構(gòu)或僅僅是為了提供一些封裝的目的先紫，你希望對(duì)混合（mixins）進(jìn)行分組治泥。你可以用Less更直觀地實(shí)現(xiàn)這一需求。
#bundle(){.button{display:block;border:1px solid black;background-color:grey;&:hover{background-color:white;}}}
現(xiàn)在遮精，如果我們希望把.button類混合到#header a中居夹，我們可以這樣做：
#header a{color:orange;#bundle.button();// 還可以書寫為 #bundle > .button 形式}
編譯成
#header a{color:orange;display:block;border:1px solid black;background-color:grey;}#header a:hover{background-color:white;}
8.映射Maps
從Less 3.5版本開始，可以將混合（mixins）和規(guī)則集（rulesets）作為一組值的映射（map）使用本冲。簡(jiǎn)單來說就是想js中的對(duì)象.屬性來讀取值准脂，但是是用[]的形式
#colors(){primary:blue;secondary:green;}.button{color:#colors[primary];border:1px solid #colors[secondary];}
編譯成
.button{color:blue;border:1px solid green;}
9.作用域Scope
Less中的作用域的概念與JavaScript類似，首先在本地查找變量和混合（mixins）檬洞，如果找不到狸膏，則從“父”級(jí)作用域繼承
@var:red;#page{@var:white;#header{color:@var;// white}}
并且變量類似js有提升效果，例如
@var:red;#page{#header{color:@var;// white}@var:white;}
10.注釋
less的注釋跟js一致添怔，分單行注釋和多行注釋
/* 一個(gè)塊注釋
* style comment! */@var:red;// 這一行被注釋掉了湾戳！@var:white;
11.導(dǎo)入Importing
Less也支持導(dǎo)入語法贤旷，如果導(dǎo)入的文件是.less擴(kuò)展名，則可以將擴(kuò)展名省略掉
@import"library";// library.less@import"typo.css";
作者：深度剖析JavaScript
鏈接：http://www.reibang.com/p/6d5f8ec6e2f4
來源：簡(jiǎn)書
著作權(quán)歸作者所有砾脑。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)幼驶，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
