Less 介紹

Less環(huán)境安裝

• 安裝nodejs
• 在部分win8系統(tǒng)當(dāng)中無法安裝

• （解決辦法的是 已管理員權(quán)限運(yùn)行cmd然后再按寫命令切換到安裝包目錄，直接命令執(zhí)行）

• 安裝完成nodejs之后

• 檢測(cè)是否安裝完成?node –v?查看版本
• 然后檢測(cè) npm是否自帶?npm –v?查看版本
• 在線安裝
• 然后 運(yùn)行?npm install –g less?(部分電腦要 sudo 管理權(quán)限
• 
  

• Lessc –v?查看版本 是否安裝成功
• 也可以離線安裝，一般沒人這么做就不說了

學(xué)習(xí)less

官網(wǎng)
官網(wǎng)中文網(wǎng)
中文非官網(wǎng)

• Lessc less.less less.css?編譯less文件成css

簡(jiǎn)介

• CSS（層疊樣式表）是一門歷史悠久的標(biāo)記性語言，同 HTML 一道，被廣泛應(yīng)用于萬維網(wǎng)（World Wide Web）中。HTML 主要負(fù)責(zé)文檔結(jié)構(gòu)的定義，CSS 負(fù)責(zé)文檔表現(xiàn)形式或樣式的定義。
• 作為一門標(biāo)記性語言，CSS 的語法相對(duì)簡(jiǎn)單，對(duì)使用者的要求較低，但同時(shí)也帶來一些問題：CSS 需要書寫大量看似沒有邏輯的代碼，不方便維護(hù)及擴(kuò)展，不利于復(fù)用，尤其對(duì)于非前端開發(fā)工程師來講，往往會(huì)因?yàn)槿鄙?CSS 編寫經(jīng)驗(yàn)而很難寫出組織良好且易于維護(hù)的 CSS 代碼，造成這些困難的很大原因源于 CSS 是一門非程序式語言，沒有變量、函數(shù)、SCOPE（作用域）等概念。LESS 為 Web 開發(fā)者帶來了福音，它在 CSS 的語法基礎(chǔ)之上，引入了變量，Mixin（混入），運(yùn)算以及函數(shù)等功能，大大簡(jiǎn)化了 CSS 的編寫，并且降低了 CSS 的維護(hù)成本，就像它的名稱所說的那樣，LESS 可以讓我們用更少的代碼做更多的事情。

LESS 原理及使用方式

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

語法

• 變量
• Mixin混入
• 嵌套
• Import
• 函數(shù)（內(nèi)置函數(shù) 運(yùn)算）

變量

• LESS 允許開發(fā)者自定義變量，變量可以在全局樣式中使用，變量使得樣式修改起來更加簡(jiǎn)單。
  
  

  /*-----------------變量-----------------*/
  @mainColor:#E93223;
  body{
    color: @mainColor;
  }

Mixin混入

• Mixin（混入）功能對(duì)用開發(fā)者來說并不陌生，很多動(dòng)態(tài)語言都支持 Mixin（混入）特性，它是多重繼承的一種實(shí)現(xiàn)，在 LESS 中，混入是指在一個(gè) CLASS 中引入另外一個(gè)已經(jīng)定義的 CLASS，就像在當(dāng)前 CLASS 中增加一個(gè)屬性一樣。

/*-----------------mixin 混入----------------*/
/*顏色*/
.red{
  color: @mainColor;
}
.border{
  border: 1px solid #ccc;
}
.redBorder(){
  color: @mainColor;
  border: 1px solid #ccc;
}
.mixin-class{
  .red();
  .border();
}
.mixin-fuc{
  .redBorder();
}

嵌套

• 在我們書寫標(biāo)準(zhǔn) CSS 的時(shí)候，遇到多層的元素嵌套這種情況時(shí)，我們要么采用從外到內(nèi)的選擇器嵌套定義，要么采用給特定元素加 CLASS 或 ID 的方式

/*------------------嵌套------------------*/
/*輪播圖*/
#wjs_banner{
  .carousel-inner{
    > div.item{
      a.img_box{
        background: url("../images/slide_01_2000x410.jpg") no-repeat center center;
        height: 410px;
        /*調(diào)用redBorder mixin*/
        display: block;
        .redBorder();
        /*調(diào)用@mainColor 變量*/
        &:hover{
          color: @mainColor;
        }
      }
      a.img_mobile{
        width: 100%;
        display: block;
        img{
          width: 100%;
          display: block;
        }
      }
    }
  }
}