1、動態樣式語言less、sass、stylus的基本使用；
2、前端自動化工具的情況及基本使用；
3、前端效能優化的多個注意點。

less、sass、stylus

它們是三種類似的樣式動態語言，屬於css預處理語言，它們有類似css的語法，為css賦予了動態語言的特性、如變數、繼承、運算、函式等。這麼做是為了css的編寫和維護。

它們使用的檔案分別是：.less、.scss、*.styl,這些檔案是不能再網頁上直接使用的，最終要編譯成css檔案來使用，編譯的方法有軟體編譯，或者用nodejs程式。

less、sass編譯軟體：
http://koala-app.com/index-zh.html

less中文網址：http://lesscss.cn/

less語法：

1、註釋

    // 不會被編譯的註釋
    /* 會被編譯的註釋 */

2、變數

@w:200px;
.box{
    width:@w;
    height:@w;
    background-color:red;
}

3、混合

.border{
    border:1px solid #ddd;
}
.box(@w:100px,@h:50px,@bw:1px){
    width:@w;
    height:@h;
    border:@bw solid #ddd;
}
.box{
    .border;
    background-color:red;
}
 

4、匹配模式

.p(r){
    postion:relative;
}
.p(a){
    postion:absolute;
}
.p(f){
    postion:fixed;
}
.box{
    .p(f);
}

5、運算

@w:300px;
.box{
    width:@w+20;
}

4、巢狀

.list{    
    li{
        ...
    }
    a{
        ...
        &:hover{
            ...
        }
    }
    span{
        ...
    }
}
 

5、匯入

// 匯入common.less,匯入a.css檔案

@import "common";
@import (less) "a.css";