less

1、使用方法

1.1直接引入less.js

好處：能獲取客戶端的數據，從而進一步計算。
壞處：在客戶端解析less形成性能浪費，不利於維護。

1.2koala編譯器

每次都要打開軟件

1.3在服務器環境編譯node npm

對於初學者可能比較生疏
vue項目在用less時，在style裏邊寫：

1.4在編譯器中實時編譯

配置稍微麻煩

2、less是什麼？

官方：一種動態樣式語言：
變量、繼承、運算、函數
個人理解：一個寫css的工具，更加的靈活的統籌全局更加方便的計算。

3、嵌套

嵌套：咱們能夠在一個選擇器中嵌套一個選擇器來實現繼承，這樣很大程度減小了代碼量，而且代碼看起來更加的清晰。

<div class="out">
    <div class="inner"></div>
</div>
.out{
    width:500px;
    height:500px;
    background:#ccc;
    .inner{
        width:500px;
        height:500px;
        background:#ff0000;
    }
}

4、變量

變量：變量容許咱們單獨定義一系列通用的樣式，而後在須要的時候去調用因此在作全局樣式調整的時候咱們可能只須要修改幾行代碼就能夠了。
變量做用域：一個或括號就是一個做用域。

@width：200；
@height：200；
@background：#ff0000；
<div class="out">
    <div class="inner"></div>
</div>
.out{
    width:500px;
    height:500px;
    background:#ccc;
    .inner{
        width:@width*1px;
        height:@height*1px;
        background:@background;
    }
}

5、混合

5.1混合：

將一個定義好的class A引入到另外一個class B中，從而簡單實現class B繼承class A中的全部屬性。

.clearFix{
    *zoom:1;
    &:after{
        content:'';
        display:block;
        clear:both;
    }
}
.classa{
    border:1px solid #ff0000;
}
.classb{
    .classa;
    .clearFix;
}

5.2帶參數的混合

.classa（@color）{
    border:1px solid @color;
}
.classb{
    .classa（#ff0000）;
}

5.3帶默認參數的混合

.classa（@width:1px,@style:solid）{
    border:@width @style #ff0000;
}
.classb{
    .classa（1px,dotted）;
}

6、arguments變量

arguments變量，表明了全部的參數（在不在意參數順序的時候使用）

.classa（@width:1px,@style:solid）{
    border:@arguments #ff0000;
}
.classb{
    .classa（1px,dotted）;
}

7、 模式匹配

.border(left,@width:1px){
    border-left:@width solid #333;
}
border(right,@width:1px){
    border-right:@width solid #333;
}
.border(@_,@width:1px){
    width:100px;
}
.box1{
    .border(left,5px)
}
.box2{
    .border(right,5px)
}

8、Math函數

round(5.5)    四捨五入 6
ceil（2.4）    向上取整 3
floor（2.6）    向下取整 2

9、命名空間

.red{
    .button{
        background：red；
    }
}
.blue{
    .button{
        background：red；
    }
}
.box{
    .red > .button;
}

10、註釋

// 這種註釋方法不會被編譯到css文件裏面去（一般用於生產環境）
/*
這種註釋會被解析到css文件裏面去
*/

11、關聯

@import 「global.less」

12、避免編譯

.box{
    width：@rem;
    font:(12/@rem)~'/'(20/@rem) '宋體')
}

參考連接

http://www.bootcss.com/p/less...