摘要：是一門預處理語言，它擴展了語言，增加了變量函數等特性，使更易維護和擴展。所以在生產環境中，我們需要事前把文件編譯為正常的后，在相應文件中引入，以后用戶訪問的都是編譯好的，為不是拿現編譯的。代碼編譯為的結果

HTML和CSS不屬于編程語言而是屬于標記語言,很難像JS一樣定義變量、編寫方法、實現模塊化開發等。
LESS是一門CSS預處理語言，它擴展了CSS語言，增加了變量、Mixin、函數等特性，使CSS更易維護和擴展。
使用LESS基本上按照這樣的步驟：編寫LESS代碼，使用NODE、JS或者是其他的工具把編寫的LESS代碼編譯成我們平時看到的CSS代碼(因為瀏覽器是無法解析LESS的語法的，所以編寫完成的LESS代碼需要進行編譯)。

Less叫做預編譯css,寫好的less代碼瀏覽器是不能直接渲染的，需要我們把它編譯成為能渲染的css才可以。

開發環境中
在開發環境下，我們一般都通過導入less插件來隨時編譯less代碼。

//注意rel="stylesheet/less"中必須加上less

生產環境中

由于每一次加載頁面都需要導入LESS插件，并且把LESS文件重新編譯為CSS，很消耗性能，導致頁面打開速度變慢。所以在生產環境中，我們需要事前把LESS文件編譯為正常的CSS后，在相應文件中引入，以后用戶訪問的都是編譯好的CSS，為不是拿LESS現編譯的。
生產環境下，我們需要事先把LESS編譯成CSS方法：
1)使用Node編譯

這種方式是目前項目中最常用的方式,它是把我們的LESS文件編譯成CSS文件，我們項目中直接的引入CSS文件即可.
(1) 安裝node
(2) 把LESS模塊安裝到全局NODE環境中

 npm install less -g 

(3) 使用命令進行編譯

     //->把styles.less文件編譯成styles.css文件(如果沒有這個CSS文件自己會創建)    
     lessc styles.less styles.css      
     //->編譯完成的CSS文件是經過壓縮的     
     lessc styles.less styles.min.css -x或者--compress 

如果你想要更牛X的壓縮,還可以自己多帶帶的設定,下面我們使用–clean-css。這個需要提前的安裝less-plugin-clean-css模塊才可以。

//->安裝less-plugin-clean-css     
     npm install -g less-plugin-clean-css
     //->安裝成功后就可以使用它壓縮了     
     lessc --clean-css styles.less styles.min.css 

2)使用編譯工具(less在線編譯)

目前常用的編譯工具有：Koala(據說目前最流行的)、在線編譯(http://tool.oschina.net/less)、SimpLESS等。

less中的變量
和JS中的變量一樣，只是LESS的變量定義不是使用VAR而是使用@。

//用變量存儲公用的屬性值
@shadowColor: #000;
.inner {
    box-shadow: 0 0 10px 0 @shadowColor;
}
//用變量存儲公用的URL、選擇器

    @selector: box;
    @bgImg: "../img";
    @property: color;
    @name: "fung";
    
    //->LESS代碼
    .@{selector} {
        width: 100px;
        height: 100px;
        @{property}: #000;
        background: url("@{bgImg}/test.png");

        &:after {
            display: block;
            content: @@var;
        }
     }

混合(Mixins)
所謂的混合其實是把某個選擇器中的樣式拷貝一份拿過來使用

//->LESS代碼
.public {
    width: 100px;
    height: 100px;
}

nav ul {
    .public;
    list-style: none;
}

//->編譯為CSS的結果
.public {
    width: 100px;
    height: 100px;
}

nav ul {
    width: 100px;
    height: 100px;
    list-style: none;
}

我們發現其實nav ul是把public中設定的樣式屬性值copy了一份到自己的樣式中。如果你想在編譯完成的結果中不輸出public這個樣式的結果，只需要按照下述的代碼編寫即可：

//->LESS代碼
.public() {//->在選擇器后面加上()就可以不編譯這個樣式了
    width: 100px;
    height: 100px;
}

nav ul {
    .public;
    list-style: none;
}

//->編譯為CSS的結果
nav ul {
    width: 100px;
    height: 100px;
    list-style: none;
}

3.extend

雖然在上述的案例中，nav ul把public中的樣式繼承了過來，但是原理卻是把代碼copy一份過來，這樣編譯后的CSS中依然會存留大量的冗余CSS代碼，為了避免這一點，我們可以使用extend偽類來實現樣式的繼承使用。
```

//->LESS代碼
.public {
    width: 100px;
    height: 100px;
}

nav ul {
    &:extend(.public);
    list-style: none;
}

//->編譯為CSS的結果
.public, nav ul {
    width: 100px;
    height: 100px;
}

nav ul {
    list-style: none;
}
```
或者
```

//->LESS代碼
.public {
    width: 100px;
    height: 100px;
}

nav ul:extend(.public) {
    list-style: none;
}

//->編譯為CSS的結果和第一種寫法一樣
```

4.命名空間和作用域

在LESS中定義了命名空間就創建了一個私有的作用域，在這個私有作用域中使用的變量都是先看一下自己作用域中有沒有，沒有的話，在向上一級查找（類似于JS的作用域鏈）
```

//->LESS代碼
@color: #ccc;
.box {
    @color: #eee;
    .gray {
        color: @color;
    }
}

.box2 {
    .gray {
        color: @color;
    }
}

//->編譯為CSS的結果
.box .gray {
    color: #eee;
}

.box2 .gray {
    color: #ccc;
}
```

5.!important
在調用的混合集后面追加 !important 關鍵字，可以使混合集里面的所有屬性都繼承 !important.

//->LESS代碼
@color: #ccc;
.box {
  @color: #eee;
  .gray {
    color: @color;
  }
}

nav ul {
  .box !important;
}

//->編譯為CSS的結果
.box .gray {
    color: #eee;
}

nav ul .gray {
    color: #eee !important;
}

6.函數
如同JS一樣，LESS也可以向函數一樣設定形參數，這個技巧在我們的項目中會被經常的使用到，例如：處理CSS3的兼容問題

    //->LESS代碼
    .transition(@property:all;@duration:1s;@function:linear;@delay:0s;) {
      -webkit-transition: @property @duration @function @delay;
      -moz-transition: @property @duration @function @delay;
      -ms-transition: @property @duration @function @delay;
      -o-transition: @property @duration @function @delay;
      transition: @property @duration @function @delay;
    }

    .box1 {
      .transition;
    }

    .box2 {
      .transition(@duration: 2s);
    }

    .box3 {
      .transition(@duration: 2s; @property: width;);
    }

    //->編譯為CSS的結果
    .box1 {
        -webkit-transition: all 1s linear 0s;
        -moz-transition: all 1s linear 0s;
        -ms-transition: all 1s linear 0s;
        -o-transition: all 1s linear 0s;
        transition: all 1s linear 0s;
    }

    .box2 {
        -webkit-transition: all 2s linear 0s;
        -moz-transition: all 2s linear 0s;
        -ms-transition: all 2s linear 0s;
        -o-transition: all 2s linear 0s;
        transition: all 2s linear 0s;
    }

    .box3 {
        -webkit-transition: width 2s linear 0s;
        -moz-transition: width 2s linear 0s;
        -ms-transition: width 2s linear 0s;
        -o-transition: width 2s linear 0s;
        transition: width 2s linear 0s;
    }

此外我們需要值得注意的是，LESS中也有arguments。

    //->LESS代碼
    .transition(@property:all;@duration:1s;@function:linear;@delay:0s;) {
      -webkit-transition: @arguments;
      transition: @arguments;
    }

    .box1 {
      .transition;
    }

    //->編譯為CSS的結果
    .box1 {
        -webkit-transition: all 1s linear 0s;
        transition: all 1s linear 0s;
    }