2.21學(xué)習(xí)經(jīng)驗(yàn)分享#

Bruce_Zhu于2017.2.21

一、LESS基礎(chǔ)

1. LESS 是一門 CSS 預(yù)處理語言，它擴(kuò)展了 CSS 語言，增加了變量、Mixin、函數(shù)等特性，使 CSS 更易維護(hù)和擴(kuò)展。并且LESS 可以運(yùn)行在 Node 或?yàn)g覽器端。

2. 本質(zhì)上，LESS 包含一套自定義的語法及一個(gè)解析器，用戶根據(jù)這些語法定義自己的樣式規(guī)則，這些規(guī)則最終會(huì)通過解析器，編譯生成對(duì)應(yīng)的 CSS 文件。LESS 并沒有裁剪 CSS 原有的特性，更不是用來取代 CSS 的，而是在現(xiàn)有 CSS 語法的基礎(chǔ)上，為 CSS 加入程序式語言的特性。

二、 LESS編譯方法

1. 方式1 在客戶端運(yùn)行LESS轉(zhuǎn)換程序，了解在html中引入xx.less,同時(shí)再引入less.js,就是一個(gè)可以運(yùn)行在客戶端瀏覽器中的LESS編譯程序 -- 效率偏低，不推薦使用。

2. 方式2 在服務(wù)端運(yùn)行LESS轉(zhuǎn)換程序

   1） 下載并安裝一款服務(wù)器端的js解釋器-nodejs

   2） 下載LESS文件的轉(zhuǎn)換程序lessc --js腳本

   3） 在服務(wù)器端js解釋器運(yùn)行l(wèi)essc轉(zhuǎn)換器，把自己編寫的.less文件轉(zhuǎn)換為css文件

       a) 可以在命令行中使用轉(zhuǎn)換程序
   
   C:\Users\Administrator>node.exe lessc my.less my.css
   
       b) 在HBuilder中使用轉(zhuǎn)換程序
   

   4）在 HTML文件中，引用編譯得到的css文件

3. 方式3 使用Sublime Text來轉(zhuǎn)換LESS文件

   1） 打開Sublime Text，然后用Ctrl + Shift + P調(diào)出插件控制臺(tái)，搜索LESS2CSS插件并下載。

   2） 安裝好后，當(dāng)你寫好LESS文件后按Ctrl + S即可在當(dāng)前LESS文件目錄下自動(dòng)編譯好.CSS文件（前提是要安裝好Nodejs）

三. LESS語法學(xué)習(xí)

1. LESS完全支持CSS語法

2. LESS支持單行注釋和多行注釋，但只有多行注釋會(huì)被轉(zhuǎn)換到CSS文件中

3. LESS支持變量(variable)

   @變量名：值

   使用：選擇器 {樣式：@變量名}

4. LESS支持樣式混合-在一個(gè)樣式中引用另一個(gè)樣式

    .class1(){...}
    .class2{..
        ...
         .class1
         ...
    }
   

5. 帶參混合

    .class()(@參數(shù)1，@參數(shù)2，。。。){....}
   
    .class2 {
   
        ...
          .class(參數(shù)1，參數(shù)2);
        ...
        }
    }
   

6. 嵌套規(guī)則

    .class1{
   
     ...
   
   .class2 {
   
       }
    }
   
    轉(zhuǎn)換的結(jié)果
   
    .class1{
   
    }
   
    .class1 .class2{
   
      }