什么是LESS
LESSCSS是一種動態(tài)樣式語言初橘，屬于CSS預(yù)處理語言的一種验游，它使用類似CSS的語法充岛，為CSS的賦予了動態(tài)語言的特性，如變量耕蝉、繼承崔梗、運算、函數(shù)等垒在，更方便CSS的編寫和維護(hù)蒜魄。
LESSCSS可以在多種語言、環(huán)境中使用场躯，包括瀏覽器端谈为、桌面客戶端、服務(wù)端踢关。
語言特性快速預(yù)覽：
變量：
變量允許我們單獨定義一系列通用的樣式伞鲫，然后在需要的時候去調(diào)用。所以在做全局樣式調(diào)整的時候我們可能只需要修改幾行代碼就可以了签舞。
LESS源碼：
@color:#4D926F;
#header{
color:@color;
}
h2{
color:@color;
}```
編譯后的CSS：
header{
color:#4D926F;
}
h2{
color:#4D926F;
}```
混合（Mixins）
混合可以將一個定義好的class A輕松的引入到另一個class B中秕脓，從而簡單實現(xiàn)class B繼承class A中的所有屬性。我們還可以帶參數(shù)地調(diào)用儒搭，就像使用函數(shù)一樣吠架。
LESS源碼：
.rounded-corners(@radius:5px) {
-webkit-border-radius:@radius;
-moz-border-radius:@radius;-ms-border-radius:
radius;-o-border-radius:@radius;
border-radius:@radius;
}
#header{
.rounded-corners;
}
#footer{
.rounded-corners(10px);
}```
編譯后的CSS：
header{
-webkit-border-radius:5px;
-moz-border-radius:5px;
-ms-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;
}
footer{
-webkit-border-radius:10px;
-moz-border-radius:10px;
-ms-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}````
嵌套
我們可以在一個選擇器中嵌套另一個選擇器來實現(xiàn)繼承，這樣很大程度減少了代碼量搂鲫，并且代碼看起來更加的清晰傍药。
LESS源碼：
注：&”引用自身
#header{
h1{
font-size:26px;
font-weight: bold;
}
p{
font-size:12px;
a{
text-decoration: none;
&:hover{border-width:1px}
}
}
}```
編譯后的CSS：
header h1{
font-size:26px;
font-weight: bold;
}
header p{
font-size:12px
;}
headerp a{
text-decoration: none;
}
headerp a:hover{
border-width:1px;
}```
函數(shù)和運算
運算提供了加，減默穴，乘怔檩，除操作；我們可以做屬性值和顏色的運算蓄诽，這樣就可以實現(xiàn)屬性值之間的復(fù)雜關(guān)系薛训。LESS中的函數(shù)一一映射了JavaScript代碼，如果你愿意的話可以操作屬性值仑氛。
LESS源碼：
@the-border:1px;
@base-color:#111;
@red:#842210;
#header{
color: (@base-color*3);
border-left:@the-border;
border-right: (@the-border*2);
}
#footer{
color: (@base-color+#003300);
border-color: desaturate(@red,10%);
}```
編譯后的CSS：
header{
color:#333;
border-left:1px;
border-right:2px;
}
footer{
color:#114411;
border-color:#7d2717;
}```
流程控制
分支結(jié)構(gòu)
LESS源碼：
@x:10px;
@y:10px;
.box(@type,@x,@y)when(@type=1){
width:@x;
height:@y;
}
(@type=0){
width:@x*2;
height:@y*2;
}
.left{
background:red;
.box(@type=1);
}
.right{
background:green;
.box(@type=1);
}```
編譯后的CSS：
.left{
background:red;
width:10px;
height:10px;
}
.right{
background:green;
width:20px;
height:20px;
}```
