原鏈接：https://www.cnblogs.com/xinjie-just/p/6715189.html
15年自學了 less ，可是一直沒用，就忘記了。后來抱着提高 css 開發速度的目的，又去學習了 less ，學完馬上用，效果立竿見影，記得也牢了。剛開始學習前，我們總會問自己一個問題，學習它有什么用。就拿這個 less 來說，學習它有什么用，分明就有了 css 用來編寫樣式，我還要花時間來研究 less ，而且學完了還不一定能用上，忘得也快，這不是浪費我時間嗎。其實，存在即有用，至於對你的用處有多大，需要自己使用過后方才知道。
好了，說說我自己在使用 less 過程中的心得。
一、要使用 less 需要一個 less 編譯的工具：
1. koala 的下載與安裝:
下載建議到官網去下載 http://koala-app.com/index-zh.html ，下載后一個壓縮包，解壓后雙擊可執行文件即可使用了。不需要安裝。
2. koala 的介紹：
打開 koala 軟件，如上圖，點擊"+"可以選擇文件夾，選擇的文件夾里需要預先准備一個 less 文件，且僅僅只需要准備 less 文件，當添加了這個文件夾后，koala 會根據 less 文件的名稱在同一目錄下自動添加一個 css 文件。
可以選擇語言：
點擊工具圖標，可以選擇語言，這里以簡體中文為例。
二、less 的使用准備
在 html 中引入的依然是 css 文件，只不過我們一旦選用 less 編寫樣式了，以后維護就是維護 less 文件。
三、編寫 less
1. 注釋：
less 的注釋有兩種方法，"/**/" 和 "//"，前一種會在 css 文件中顯示，后一種不會在 css 顯示。
從兩幅圖的對比可以看出，less 中 "/**/" 方式添加的注釋在 css 中也顯示了，而 "//" 方式添加的注釋在css 中沒有顯示
2. 變量
上圖中定義了三個變量， text-color, main-color, fs
上圖中使用了其中一個變量 text-color，
定義變量的方法："@"加上變量名。
定義變量的好處：當需要更改樣式中多處的值時，只需要更改變量的值，提高效率。
3. 運算
如上圖，有加法和除法運算，通過前面定義變量 fs ，這里使用它並在其基礎上加上 4，所以它的 font-size 值就變成了 20px(16px + 4)。
使用運算的好處：避免人工重復計算！
比如：想要讓單行文本豎直居中顯示，需要設置高和行高相同。但是如果設置了 box-sizing: border-box; border-bottom-width: 1px; 的話，就需要讓行高的值比高的值小 1px。這種情況下，就可以設置變量再結合運算讓復雜的工作變得簡單。
@height: 30px;
height: @height;
line-height: @height - 1;
如果想要更改高度的值，只需要更改變量 height 的值就行了。而不需要更改 height 和 line-height 兩個屬性的值，提高效率。
4. 繼承
在上面的諸多例子中，都有"&"符號，這個符號起到繼承的作用。這個符號就是它的父級標簽(類，id等等)用幾個例子說明：
.industry-section {
width: 950px;
margin-right: auto;
margin-left: auto;
& > div:not(.heading) {
padding: 40px 150px;
& h3 {
font-size: @fs + 12;
margin-bottom: .5rem;
}
& li {
font-size: @fs + 2;
line-height: 1.6;
}
}
}
相當於：
.industry-section {
width: 950px;
margin-right: auto;
margin-left: auto;
}
.industry-section > div:not(.heading) {
padding: 40px 150px;
}
.industry-section > div:not(.heading) h3 {
font-size: 28px;
margin-bottom: .5rem;
}
.industry-section > div:not(.heading) li {
font-size: 18px;
line-height: 1.6;
}
再例如：
& > a {
& > span {
display: block;
&:first-of-type {
font-size: 18px;
}
&:last-of-type {
font-size: 12px;
text-transform: capitalize;
}
}
}
相當於：
a > span {
display: block;
}
a > span:first-of-type {
font-size: 18px;
}
a > span:last-of-type {
font-size: 12px;
text-transform: capitalize;
}
5. 混合
混合可以將一個定義好的class A輕松的引入到另一個class B中，從而簡單實現class B繼承class A中的所有屬性。我們還可以帶參數地調用，就像使用函數一樣。
例如：
class A
.page-width { width: 100%; max-width: 1920px; margin-right: auto; margin-left: auto; }
class B
body {
.page-width;
font-size: @fs;
color: @text-color;
background-color: #fff;
font-family: "Microsoft Yahei", Arial, sans-serif;
}
編譯后的css:
body { width: 100%; max-width: 1920px; margin-right: auto; margin-left: auto; font-size: 16px; color: #333; background-color: #fff; font-family: "Microsoft Yahei", Arial, sans-serif; }
6. 在 less 中依然可以使用媒體查詢(工作中用到，更新於20170421)：
less 中使用媒體查詢
.application-section {
max-width: 100%;
width: 1920px;
height: 770px;
margin: 30px auto;
background: url(../images/app-scene.png) center top no-repeat;
position: relative;
& h2 {
position: absolute;
top: 70px;
left: 50%;
font-size: 0;
width: 1200px;
transform: translateX(-50%);
@media (max-width: 1600px) {
width: 1000px;
& span {
font-size: @fs + 20;
}
}
}
}
編譯后 css
.application-section {
max-width: 100%;
width: 1920px;
height: 770px;
margin: 30px auto;
background: url(../images/app-scene.png) center top no-repeat;
position: relative;
}
.application-section h2 {
position: absolute;
top: 70px;
left: 50%;
font-size: 0;
width: 1200px;
transform: translateX(-50%);
}
@media (max-width: 1600px) {
.application-section h2 {
width: 1000px;
}
.application-section h2 span {
font-size: 36px;
}
}