14.1 CSS的缺陷
- 無法定義變量；
- 重復代碼
- 計算問題
- 作用域和命名空間
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); /*單獨修改*/
}
Mixin的語法關(guān)鍵在.符號
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 運算
任何數(shù)字顏色變量都可以參加運算
@base: 5%;
@filter: @base*2;
@other: @base+@filter;
color: #888 / 4;
background-color: @base-color + #111;
height: 100%/2+@filter;
LESS的運算能夠分辨出顏色和單位改淑，
@length: 1px+7; /*8px*/
可以在復合屬性中進行運算：
border: (@width*2) solid black;
