14.1 CSS的缺陷

• 無法定義變量；
• 重復(fù)代碼
• 計(jì)算問題
• 作用域和命名空間

14.2 LESS

LESS使用：引入less文件，再引入less.js
引入操作
<link rel="stylesheet/less" type="text/css" href="css/test.less"/>

14.2.3 使用變量和操作符

/*LESS代碼*/
@color: #4d926f;
#header{
    color: @color;
}
h2{
    color: @color;
}

14.2.4使用Mixin混入

.rounded-corners(@radius: 5px){
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -o-border-radius: @radius;
    -ms-border-radius: @radius;
    border-radius: @radius;
}
#header{
    .rounded-corners;  /*. 不能省略*/
}
#footer{
    .rounded-corners(10px); /*單獨(dú)修改*/
}

Mixin的語法關(guān)鍵在.符號(hào)

14.2.5 內(nèi)嵌規(guī)則

LESS可以使用嵌套的樣式編寫層疊樣式表：

#main{
    div li{
        list-style: none;
    }
    .container{
        margin: auto;
        width: 960px;
    }
    a{
        text-decoration: none;
    }
}

14.2.6 運(yùn)算

任何數(shù)字顏色變量都可以參加運(yùn)算

@base: 5%;
@filter: @base*2;
@other: @base+@filter;
color: #888 / 4;
background-color: @base-color + #111;
height: 100%/2+@filter;

LESS的運(yùn)算能夠分辨出顏色和單位，
@length: 1px+7; /*8px*/
可以在復(fù)合屬性中進(jìn)行運(yùn)算：
border: (@width*2) solid black;

14.3 SASS