上一篇文章為:→1.9.4bootstrap

less、sass、stylus

它們是三種類似的樣式動態(tài)語言，屬于css預(yù)處理語言，它們有類似css的語法，為css賦予了動態(tài)語言的特性、如變量、繼承、運(yùn)算、函數(shù)等。這么做是為了css的編寫和維護(hù)。

它們使用的文件分別是：.less、.scss、*.styl,這些文件是不能再網(wǎng)頁上直接使用的，最終要編譯成css文件來使用，編譯的方法有軟件編譯，或者用nodejs程序。

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

less中文網(wǎng)址：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、運(yùn)算

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

4、嵌套

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

5、導(dǎo)入

// 導(dǎo)入common.less,導(dǎo)入a.css文件

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

下一篇文章為:→1.10.1前端自動化