Less和css的區別

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

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

廣州vi設計http://www.maiqicn.com

編譯Less

開發環境中
在開發環境下，我們一般都通過匯入less外掛來隨時編譯less程式碼。

//注意rel="stylesheet/less"中必須加上less
<link rel="stylesheet/less" href="./css/1.less">
<script src="./css/less-2.5.3.min.js"></script>

由於每一次載入頁面都需要匯入LESS外掛，並且把LESS檔案重新編譯為CSS，很消耗效能，導致頁面開啟速度變慢。所以在生產環境中，我們需要事前把LESS檔案編譯為正常的CSS後，在相應檔案中引入，以後使用者訪問的都是編譯好的CSS，為不是拿LESS現編譯的。

這種方式是目前專案中最常用的方式,它是把我們的LESS檔案編譯成CSS檔案，我們專案中直接的引入CSS檔案即可.

(1) 安裝node

npm install less -g

(2) 把LESS模組安裝到全域性NODE環境中

(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的基本語法

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;
    }