一、Less簡介
LESS 是一種動态的樣式表語言，通過簡潔明了的文法定義，使編寫 CSS 的工作變得非常簡單，本質上，LESS 包含一套自定義的文法及一個解析器。
二、less 安裝
1、下載下傳安裝 node.js 環境。（官網：https://nodejs.org/zh-cn/）
2、安裝完成後驗證 node 環境是否安裝成功。
在指令行中輸入：
node -v
出現 node 的版本号表示安裝成功。
3、安裝 less 工具（需要聯網）。
在指令行中輸入：
npm install -g less
即可下載下傳安裝。
4、安裝後驗證 less 是否安裝成功。
指令行輸入：
lessc -v
出現 less 版本号，即表示安裝成功。
三、編譯
浏覽器隻能識别 CSS，Less 隻是用來提升CSS可維護性的一個工具，所最終需要将LESS編譯成CSS。
編譯方式有兩種：
1、一種是使用指令行的方式手工編譯。
在我們編寫好一個 less 檔案後，可以使用指令行輸入以下指令将 less 檔案編譯成 css 檔案。
lessc .\test.less .\test.css 複制
這種手工編譯的方式效率比較低下，一般我們都會借助一些編輯器來完成自動編譯。
2、這裡我使用 vscode，使用很簡單，隻需要安裝插件 “Easy LESS” ，那麼編寫的 less 檔案在儲存時會自動在 less 檔案相同的目錄下生成 css 檔案。
四、文法
1、注釋
注釋的方式有兩種：
//
或者
/**/
。
但是這兩種注釋有差別：這兩種樣式在 less 中都是注釋，但是
//
注釋不會進行編譯，也就是不會在生成的 css 檔案中顯示，而
/**/
注釋則會在 css 檔案中對應顯示。
/*注釋 才會編譯*/
//這也是樣式，但是不會進行編譯 複制
2、變量
文法格式為：
@變量名：值;
，比如
@baseColor: #ccc;
使用的時候：
div { color: @baseColor;}
/*變量 @變量名:值; */
@baseColor:#e92322;
a{
color: @baseColor;
} 複制
3、混入（類似于函數）
文法：
.樣式名(@變量名 ：預設值) {具體樣式}
/*混入:可以将一個定義好的樣式引入到另外一個樣式中 類似于函數的調用*/
/*.addRadius{
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}*/
/*相當于定義一個函數的參數*/
.addRadius(@r:10px){
border-radius: @r;
-webkit-border-radius: @r;
-moz-border-radius: @r;
}
div{
width: 200px;
height: 200px;
/*引入已經寫好的圓角樣式*/
/*傳入參數*/
.addRadius(5px);
} 複制
4、嵌套
嵌套可以實作選擇器的繼承，可以減少代碼量，同時使用代碼結構更加清晰。
/* 以前我們寫的樣式
.jd_header{}
.jd_header > div{}
.jd_header > div > h3{}
.jd_header > div > h3::before{}
.jd_header > div > a{}
.jd_header > div > a:hover{}
*/
/*嵌套:實作選擇器的繼承，可以減少代碼量，同時使用代碼結構更加清晰*/
.jd_header{
width: 100%;
height: 200px;
.addRadius();
// 加 > 表示直接子元素
> div{
// 加 & 表示中間沒有空格為 div::before，如果沒有 & 則是 div ::before 就錯了。
&::before{
content: "";
}
width: 100%;
// div下面的直接子元素a
>a{
text-decoration: underline;
// a::hover，中間沒有空格
&:hover{
text-decoration: none;
}
}
> h3{
height: 20px;
}
ul{
list-style: none;
}
}
} 複制
五、less 檔案引入
我們之前編寫好 less 檔案之後，都是自動解析成 css 然後添加到 html 檔案中。如果 css 的檔案很多的話，就要引入很多個 link 标簽，那麼可不可以直接引入 less 檔案呢？
當然可以。
文法：
<link rel="stylesheet/less" href="./index.less"> 複制
隻是在 stylesheet 後面加上 less 的說明。
隻是引入 less 檔案是不可以的，還需要引入解析 less 的 js 插件。
<script src="./js/less.js"></script> 複制
看起來好麻煩哦，為什麼要引入 less 檔案，它有什麼好處嗎？
好處是：不管有多少 less 檔案，隻需要引入一個 less 檔案就可以了，其他需要的 less 檔案都包含在引入的這個 less 檔案中。
如何在 less 檔案中引入其他 less 檔案呢？
文法：
@import "other1.less"; // other.less 為其他 less 檔案的路徑名稱
@import "other2.less";
@import "other3.less"; 複制
這樣，不管有多少個 less 檔案，都可以寫到一個待引入的 less 檔案中。