less

1、less

一種動態樣式語言：變量，繼承，運算，函數。

2、使用方法

直接引入less.js 或 npm install

3、特性

1.嵌套：在一個選擇器中嵌套另一個選擇器來實現繼承，減小了代碼量，而且看起來更加的清晰。

須要注意的是：&表明 自己。 好比要給a元素加hover,能夠這樣寫：

a{
    color: #fff;
    &:hover{
      color: red;
    }
}

2.變量：咱們單獨定義一系列通用的樣式，而後在須要的時候去調用，因此在作全局樣式調整的時候只須要改不多的代碼便可。

定義變量：

@width:12px;

使用：

div{
    width: @width;
}

也能夠多個變量結合使用：

@width: 2px;
@style:solid;
@red:red;
@blue:blue;
.div1{
border: @width @style @red;
}
.div2{
border: @width @style @blue;
}

須要注意的是：變量的定義是有做用域的。

.div1{
    @a:10px;
    .main{
    width: @a; /* 能夠找到 */
    }
}
.div2{
    width: @a; /* 錯誤的，找不到 */
}

3.混合：將定義好的class A引入到class B中，從而實現class B繼承class A中的全部屬性。

3.1最簡單的混合：把classA直接丟到classB當中

.classA{
    border: 1px solid red;
}
.clearFix{
    *zoom:1;
    &:after{
        content:'';
        display: block;
        clear: both;
    }
}
.classB{
    .classA;
    .clearFix; /* 清除浮動 */
}

3.2 帶參數（變量）的混合

.border(@color){
    border: 1px solid @color;
}
.box1{
    .border(red);
}
.box2{
    .border(blue);
}
.box3{
    .border(yellow);
}

多參數也是與上面同樣，替換便可。

帶默認值的參數混合：寫了這個參數，可是不是必定要傳值，沒有傳值就使用默認值。

.border(@color:red){
    border: 1px solid @color;
}
.box1{
    .border();
}
.box2{
    .border(blue);
}
.box3{
    .border();
}

arguments變量：表明全部參數。不在意變量順序的時候使用.

.border(@width:1px,@style:solid){
    border: @argument #333;
}
.box1{
    .border(2px,red);
}

4.模式匹配：屬性名不能用變量表示，因而能夠用模式匹配解決

4.1 @_表明默認匹配

4.2 根據傳入的首參進行匹配（這樣的狀況首參不傳會報錯）

.border(top,@width:1px){
        border-top: @width solid #333;
      }
      .border(right,@width:1px){
        border-right: @width solid #333;
      }
      // 默認匹配，每個都會帶上
      .border(@_,@width:1px){ 
        width: 100px;
      }
      .box1{
        .border(top);
      }
      .box1{
        .border(right);
      }
}

5.其餘

Math函數

round(1.67) //2

ceil(2.4) //3 向上取整

floor(2.6) //2 向下取整

.border(@_,@width:1px){ 
        width: round(1.67)*1px; //四捨五入 2px
}

命名空間

.red{
   .button{
        background-color: red;
    }
}
.box{
     .red > .button;
}

importing 引用另外的less文件

@import "lib.less"

避免編譯 —— ~

font:(12/@rem)~'/'(20/rem) '宋體';