前提理解：第一個，less是單獨的一種檔案，可以理解為css的升級版，完全按照css寫也沒問題，不過它提供了很多便利的東西，可以省好多程式碼量。第二個，html只認css,所以需要配套一些軟體將less解析成css,引用時候，直接引用css就好。gulp,koala 都是常用的，Koala好像簡單且方便一點。

巢狀

less的優勢有很多，最常用也是最讓人舒坦的應該就是它的巢狀規則。 我們寫css時如果元素過多，每個都像

.test .contnet ul li{ }

這樣寫的話，大概會瘋，結構不清晰，查詢起來也不知道哪塊歸哪塊，反正長長的都是css。在less中，則可以這樣寫

.test{

　　.content{

　　　　ul{

　　　　li{}

　　　　}

　　}

}

看起來好像很煩，其實不是，因為css要寫起來，需要四個塊，每個塊都得把父元素寫清楚，不然有可能重名出錯（尤其專案大起來的時候，幾十個頁面，class重名太常見了），而less只需要一個塊， .test連同其後代元素全部在它的包裹內設定好，每個元素名稱只需要寫一次就夠了。

&

這個符號在less中可以代替父級元素，舉個栗子

a{

　　color：blue；

　　&：hover{

　　　　color：red；

　　}

}

再比如，父元素叫.wrap  兒子元素中有一個叫 .wrap_2，那就可以這樣寫

.wrap{

　　&_2{}

}

優點：塊和塊界限可以更清楚，很多東西不需要並列寫；時不時還可以偷個懶，比如爸爸類的名字改來改去的時候，寫&也省心好多。

變數

重要說明：變數需要@開頭，比如@width，@height,名字可以隨便取

定義的話在相應位置直接寫就好，類似於這種(寫.box外面也可以)

.box{

　　@width:200px;

　　@height:500px;

　　@my_color:#ccc;

　　width:@width;

　　height:@height;

　　background:@my_color;

}

例子比較簡單可能看不出什麼優越性，事實上大量重複的，或者是統一的樣式使用變數就很方便，而且便於查詢和修改，比如統一的背景色，或者統一的字型，字型大小；

注意點：變數有作用域，只能給自己和後代元素用，出了最外層的{}，別的類沒法呼叫。

運算

有變數當然可以計算，比如

@width:500px;

.box{

　　width：@width-50;

}

意思就是450px,這裡的計算加減乘除皆可，單位可加可不加。

混合

有點類似於函式的呼叫，這裡的話就要說點別的東西了，工作前，我對於css的理解大概就是給html對應的元素設定樣式，工作後我才發現，不對，css應該是羅列各種各樣的樣式，html裡只是選擇了其中的一款。為什麼會產生這種感覺，因為樣式會重複，元件會重複，這個頁面有個tab切換，別的頁面也有tab切換；這個位置有個按鈕，其他好幾個位置也有一個按鈕。如果每個頁面都私人定製，那就意味著我們需要不斷的寫重複的東西，在css中我們沒有辦法，最多花點時間拷貝過來，但是less中可以方便很多。

/*這裡是按鈕的統一設定，最好寫最外層，方便呼叫*/

.btn{

　　width:120px;

　　height:30px;

　　line-height:30px;

　　border-radius:15px;

　　color:#fff;

　　font-size:14px;

　　text-align:center;

　　background:#55E276;

　　cursor:pointer;

}

//下方為各種位置的按鈕，less中允許雙斜線的註釋

.submit,.buy,.star{

　　.btn;

}

一次書寫，直接呼叫就好。

但按鈕和按鈕畢竟是不一樣的，所以需要有所區別，區別可能是顏色，也可能是大小長度，解決方法有兩個，planA：公用部分直接呼叫，區別的部分自己寫。planB：傳入引數。

planA

/*這裡是按鈕的統一設定，最好寫最外層，方便呼叫*/

.btn{

　　width:120px;

　　height:30px;

　　line-height:30px;

　　border-radius:15px;

　　color:#fff;

　　font-size:14px;

　　text-align:center;

　　background:#55E276;

　　cursor:pointer;

}

//下方為各種位置的按鈕，less中允許雙斜線的註釋

.submit{

　　.btn;

　　box-shadow:0 1px 5px #ccc;

}

.star{

　　.btn;

　　&:hover{

　　　　background:#E65151;

　　}

}

.buy{

　　.btn;

　　border:1px solid #ccc;

}

planB

/*傳參類似於函式，所以這裡的變數作用域僅在{}之內，取什麼名字都隨意*/

.btn(@color){ //這裡加個了括號放參數

　　width:120px;

　　height:30px;

　　line-height:30px;

　　border-radius:15px;

　　color:#fff;

　　font-size:14px;

　　text-align:center;

　　background:@color; //用引數表示

　　cursor:pointer;

}

//下方為各種位置的按鈕，背景顏色作為引數傳入

.submit{

　　.btn(red);

　　box-shadow:0 1px 5px #ccc;

}

.star{

　　.btn(#55E276);

　　&:hover{

　　　　background:#E65151;

　　}

}

其實最後我把兩個方案相當於合併了一下，共用但是有區別的用傳參解決，獨有的，直接寫就可以了。

傳參也可以放入預設值，具體這樣寫

.btn(@width:500px){width:@width;}

呼叫時候是這樣的

.submit{

　　.btn();  //這裡一定要加括號，需要改預設值，直接寫括號裡，否則寬度就是500px

}

匹配模式

還是上面的例子，如果我一定要用一個.btn(xxxxx)解決，涵蓋所有按鈕樣式，可不可以，答案是可以。匹配模式就是這種可以隨便定製的東西，其實理解起來也很簡單，括號裡多一個命名而已，比如呼叫這個.btn(no_border,#55E276); 表示無邊框樣式，背景色為#55E276(注意，命名是沒有@符號的)，如果呼叫.btn(border,#E65151); 表示有邊框樣式，背景色為#E65151，具體寫法如下

.btn(@_,@color){ //不同命名的公共部分要這樣寫，必須是@_，表示公共部分

　　width:120px;

　　height:30px;

　　line-height:30px;

　　border-radius:15px;

　　color:#fff;

　　font-size:14px;

　　text-align:center;

　　background:@color; //用引數表示

　　cursor:pointer;

}

.btn(no_border,@color){

　　//可以直接這樣放著，或者寫個border：none   這裡的列子舉得不好，如果換成左浮動右浮動，或者絕對定位的上下左右，應該更好點

}

.btn(border,@color){

　　border:1px solid #ccc;

}

.btn(border); //表示預設背景色有邊框，邊框顏色也可以寫個引數進去

.btn(border,#E65151)//表示背景色#E65151，有邊框

小結

常用的大概就上面那些，避免編譯的  ~"..." 或者 用於除錯時候的!impotant 這些我都沒怎麼用過。less相關的函式還有一些，一些高階功能可以去官網上查詢，但就我目前而言，工作中使用上面的肯定足夠足夠了，它已經節省了我大量的時間，免去了很多重複勞動。

摘自:https://www.cnblogs.com/grey-zhou/p/5796496.html