大家好，這裡是「 從零開始學 Web 系列教程 」，並在下列地址同步更新......

• github：https://github.com/Daotin/Web
• 部落格園：http://www.cnblogs.com/lvonve/
• CSDN：https://blog.csdn.net/lvonve/

在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的探索之旅吧！

一、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 檔案中顯示，而 /**/

/*註釋  才會編譯*/
//這也是樣式，但是不會進行編譯

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 檔案中。