從零開始學 Web 之 移動Web（八）Less

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

• github：https://github.com/Daotin/Web
• 微信公衆號：Web前端之巔
• 博客園：http://www.cnblogs.com/lvonve/
• CSDN：https://blog.csdn.net/lvonve/

在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。如今就讓咱們一塊兒進入 Web 前端學習的探索之旅吧！

1、Less簡介

LESS 是一種動態的樣式表語言，經過簡潔明瞭的語法定義，使編寫 CSS 的工做變得很是簡單，本質上，LESS 包含一套自定義的語法及一個解析器。

2、less 安裝

一、下載安裝 node.js 環境。（官網：https://nodejs.org/zh-cn/）

二、安裝完成後驗證 node 環境是否安裝成功。

在命令行中輸入：node -v 出現 node 的版本號表示安裝成功。

三、安裝 less 工具（須要聯網）。

在命令行中輸入：npm install -g less 便可下載安裝。

四、安裝後驗證 less 是否安裝成功。

命令行輸入：lessc -v 出現 less 版本號，即表示安裝成功。

3、編譯

瀏覽器只能識別 CSS，Less 只是用來提高CSS可維護性的一個工具，所最終須要將LESS編譯成CSS。

編譯方式有兩種：

一、一種是使用命令行的方式手工編譯。

在咱們編寫好一個 less 文件後，可使用命令行輸入如下指令將 less 文件編譯成 css 文件。

lessc .\test.less .\test.css

這種手工編譯的方式效率比較低下，通常咱們都會藉助一些編輯器來完成自動編譯。

二、這裏我使用 vscode，使用很簡單，只須要安裝插件 「Easy LESS」 ，那麼編寫的 less 文件在保存時會自動在 less 文件相同的目錄下生成 css 文件。

4、語法

一、註釋

註釋的方式有兩種：// 或者 /**/ 。

可是這兩種註釋有區別：這兩種樣式在 less 中都是註釋，可是 // 註釋不會進行編譯，也就是不會在生成的 css 文件中顯示，而 /**/ 註釋則會在 css 文件中對應顯示。

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

二、變量

語法格式爲：@變量名：值; ，好比 @baseColor: #ccc;

使用的時候： div { color: @baseColor;}

/*變量  @變量名:值; */
@baseColor:#e92322;
a{
  color: @baseColor;
}

三、混入（相似於函數）

語法：.樣式名(@變量名 ：默認值) {具體樣式}

/*混入:能夠將一個定義好的樣式引入到另一個樣式中  相似於函數的調用*/
/*.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);
}

四、嵌套

嵌套能夠實現選擇器的繼承，能夠減小代碼量，同時使用代碼結構更加清晰。

/* 之前咱們寫的樣式
.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;
    }
  }
}

5、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 文件中。