摘要：有眾多的預(yù)處理器，其中比較流行的三個(gè)是，本文就一起來體驗(yàn)編寫代碼官方文檔官網(wǎng)栗子編譯成文件編譯客戶端瀏覽器通過在源代碼中引入文件，用于實(shí)時(shí)對樣式表文件進(jìn)行編譯并不推薦注意你的樣式文件一定要在引入前先引入，并且需要

css有眾多的預(yù)處理器，其中比較流行的三個(gè)是less、sass、stylus，本文就一起來體驗(yàn)less編寫css代碼
官方文檔:http://lesscss.org/
官網(wǎng)栗子:

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
    -webkit-box-shadow: @style @c;
    box-shadow:         @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
    .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
    color: saturate(@base, 5%);
    border-color: lighten(@base, 30%);
    div { .box-shadow(0 0 5px, 30%) }
}

編譯成css文件:

.box {
    color: #fe33ac;
    border-color: #fdcdea;
}
.box div {
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

1、客戶端(瀏覽器)
通過在源代碼中引入less.js文件，用于實(shí)時(shí)對.less樣式表文件進(jìn)行編譯(并不推薦)
注意:你的less樣式文件一定要在引入less.js前先引入，并且需要設(shè)置rel屬性值為stylesheet/less

2、NodeJs
需要在全局安裝less模塊，然后借助lessc命令把less文件編譯成css文件

sudo npm install -g less
lessc style.less style.css

3、Koala
推薦的是國人自主開發(fā)的實(shí)時(shí)編譯軟件Koala，不僅支持多種css預(yù)處理器，而且也可以跨平臺(tái)運(yùn)行，從而幫助web開發(fā)者更高效地進(jìn)行開發(fā)

變量是個(gè)好東西，允許我們多帶帶定義一系列通用的樣式，然后在需要的時(shí)候去調(diào)用，了解css中如何定義變量可查看張大神的小tips:了解CSS/CSS3原生變量var

@color: #999;
body {
    background-color: @color;
}
h2 {
    color: @color;
}

編譯后:

body {
    background-color: #999;
}
h2 {
    color: #999;
}

將一個(gè)定義好的class A輕松的引入到另一個(gè)class B中，從而簡單實(shí)現(xiàn)class B繼承class A中的所有樣式

.br (@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}
#logo {
    .br;
}
#avatar {
    .br(50%);
}

編譯后:

#logo {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
#avatar {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

在一個(gè)選擇器中嵌套另一個(gè)選擇器來實(shí)現(xiàn)繼承，從而減少代碼量

ul{
    background-color: #666;
    padding: 10px;
    list-style: none;

    li{
        background-color: #fff;
        border-radius: 5px;
        margin: 10px 0;
    }
    a{
        text-decoration:none;
        &:hover{
            color:red;
        }
    }
}

編譯后:

ul {
    background-color: #666;
    padding: 10px;
    list-style: none;
}
ul li {
    background-color: #fff;
    border-radius: 5px;
    margin: 10px 0;
}
ul a {
    text-decoration: none;
}
ul a:hover {
    color: red;
}

我們可以在less中進(jìn)行加減乘除運(yùn)算

@bdw: 5px;
@bgc: #333;
@tc: #030405;
body{
    border-width: @bdw + 10;
    background-color: @bgc * 2;
    color: @tc + #336699;
}

編譯后:

body {
    border-width: 15px;
    background-color: #666666;
    color: #366a9e;
}

less提供了一系列的顏色運(yùn)算函數(shù)

@c1: #369;
@c2: #963;
.test1{
    background-color:lighten(@c1,10%);
    color:darken(@c1,10%);
}
.test2{
    background-color:saturate(@c1,10%);
    color:desaturate(@c1,10%);
}
.test2{
    background-color:fadein(@c1,10%);
    color:fadeout(@c1,10%);
    border-color:fade(@c1,50%);
}
.test4{
    background-color:spin(@c1,10);
    color:spin(@c1,-10);
    border-color:mix(@c1,@c2);
}

編譯后:

.test1 {
    background-color: #407fbf;
    color: #264c73;
}
.test2 {
    background-color: #2966a3;
    color: #3d668f;
}
.test2 {
    background-color: #336699;
    color: rgba(51, 102, 153, 0.9);
    border-color: rgba(51, 102, 153, 0.5);
}
.test4 {
    background-color: #335599;
    color: #337799;
    border-color: #666666;
}

注意:兩種注釋的區(qū)別
/* Hello Less(我依然在這里) */
.comment-show { color: black }
// Hello Less(你看不到我了)
.comment-hide { color: white }

編譯后:

/* Hello Less(我依然在這里) */
.comment-show {
    color: black;
}
.comment-hide {
    color: white;
}