什麼是less？
css的預處理語言，可以有變數，函式等特性。比純css的方式更方便快捷。

怎麼用？
需要編譯軟體，可以用考拉。建立less字尾檔案，拖進考拉。後面補圖。步驟：
1.建立一個less字尾檔案，宣告文件頭@charset”utf-8”;
2.less檔案（或資料夾）拖入考拉中
3.右鍵設定輸出路徑，跟less檔案可以同一個檔案下，同名最好。

4.點選編譯。會創建出一個同名的css檔案。

5.html文件中引入是引css檔案，不是less檔案。
6.寫樣式或維護樣式，都在less檔案裡面寫。

less：註釋
less檔案中對語句註釋，直接單斜槓/
或者css的註釋方式/* */也行

less：變數
less裡面的變數一律用@符號開頭比如：

@test_width:300px; //宣告這個變數

.box{
 width:@test_width; //呼叫這個變數
 background-color:blue;
}

less：混合
能夠重用的東西，可以混合給別的用。

.border{
 border:solid pink 5px;
}

.box1{
 width:300px;
 height:300px;

 .border; //上面的border直接拿來用，混合class
}

.box2{
 .box1; //擁有box1的樣式（包括.border）
 margin-left
 
:100px; //box2自己的樣式
}

//帶引數的混合
.border_02(@border_width){ //定義該樣式帶變數
 border:solid yellow @border_width
}

.test_box{
 .border_02(30px); //呼叫border_02樣式並傳參
}

.border_03(@border_width:10px){//定義樣式帶變數且有預設的值10px
 border:solid yellow @border_width
}

.test_box2{
 .border_03()//不傳值，預設是10px,看css檔案。
}

注意：
1.呼叫的時候，不帶預設引數的變數，呼叫的時候不帶。帶預設引數的變數，呼叫的
時候不帶的是預設值，帶的是傳入的值。

2.不同樣式裡面同名變數，不衝突。

省事的例子，圓角邊屬性radius

//要寫3個樣式，適應不同瀏覽器
.border_radius(@radius:5px){
 -webkit-border-radius:@radius;
 -moz-border-radius:@radius;
 border-radius:@radius;
}

//直接呼叫傳參就行，不用重複寫這3行
.radius_test{
 width:100px;
 .border_radius(10px) //呼叫並傳參，不用重複寫適應瀏覽器。
}

less：匹配
匹配，相當於JS裡面的if（某條件），則執行哪個。
例子：CSS畫三角形

.sanjiao{
 width:0px;
 height:0px;
 overflow:hidden //?幹嘛的

 border-width:10px;
 border-color:transparent transparent transparent red;
 border-style:dashed dashed dashed solid; //dashed解決IE6下其他邊不能透明，是黑色的問題。
}

.triangle(top,@w:5px,@c:grey){ //top，朝上的三角。匹配到top的時候，則用朝上的三角的樣式，就是下面的程式碼，可以在對應的CSS檔案裡面看到。
 border-width:@w;
 border-color:transparent transparent @c transparent;
 border-style:dashed dashed solid dashed;
}

.triangle(bottom,@w:5px,@c:grey){ //bottom
 border-width:@w;
 border-color:@c transparent transparent transparent;
 border-style:solid dashed dashed dashed;
}

.triangle(right,@w:5px,@c:grey){ //right
 border-width:@w;
 border-color:transparent transparent transparent @c;
 border-style:dashed dashed dashed solid;
}

.triangle(left,@w:5px,@c:grey){ //left
 border-width:@w;
 border-color:transparent @c transparent transparent;
 border-style:dashed solid dashed dashed;
}

.triangle(@_,@w:5px,@c:grey){ //定義的是@_的樣式，只要呼叫，都必帶@_的樣式。後面的@w:5px,@c:grey必須寫上。
 width:0px;
 height:0px;
 overflow:hidden;
}

.sanjiao{
 .triangle(top)//呼叫了匹配top的屬性值。

//下面這三行是任何情況下都需要有的，為了不必重寫。在上面定義一個@_，這是固定格式，無論什麼時候，都帶上有這個標誌的樣式。
 width:0px;
 height:0px;
 overflow:hidden;
}

.sanjiao2{
 .trangle(bottom,100px) //這裡的呼叫預設帶上@_定義的樣式
 .trangle(abc,100px) //雖然沒有abc這個匹配，但是一定會帶上@_定義的樣式，CSS裡面可看。
}

less：運算

@test_01:300px;
.box_test{
 width:@test_01 + 20; //可以不帶單位，因為test_01帶畫素單位了。
 height:(@test_01 - 20) * 5;
 color:#ccc - 10; //顏色也可以加減。但基本不用。
}