前提理解：第一個，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