#Less# less相關知識點總結

Less和CSS的區別

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

Less叫作預編譯css,寫好的less代碼瀏覽器是不能直接渲染的，須要咱們把它編譯成爲能渲染的css才能夠。

編譯Less

1. 開發環境中
   在開發環境下，咱們通常都經過導入less插件來隨時編譯less代碼。

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

2. 生產環境中

因爲每一次加載頁面都須要導入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的基本語法

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

2. 混合(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;
    }