一、簡介
二馅闽、編譯工具
kaola（推薦）际长、node.js、瀏覽器
三析命、用法
（一）變量
@變量名:值;
（二）混合
將一個包含多個屬性的類作為另一個類的子屬性集
可以讓一個類接收一個變量值
便于“相同屬性較多 但部分屬性不同”的類的復(fù)用
eg .border_radius（@radius:5px）{
-webkit-border_radius:@radius;
-moz-border_radius:@radius;
border_radius:@radius;
}
.radius_test{
width:100px;
height:40px;
background-color:green;
.border_radius(10px);//若無傳入?yún)?shù)則默認(rèn)為5px
}
（三）匹配模式
類似于js中的if 但不完全相同主卫；
應(yīng)用其他類型時 根據(jù)首個參數(shù)匹配同名的對應(yīng)樣式
如定義了.triangle（left） .triangle（right）.triangle(top)三個同名類，應(yīng)用哪個類由匹配決定 類似于c語言中的同名函數(shù)的重載
（四）運算
可以給屬性賦變量進(jìn)行運算后的值
// 運算的兩個對象只要有一個帶單位即可
eg @test：200px;
.box{
width:@test-20*5;
}
（五）嵌套規(guī)則
.list{
width:100px;
height:100px;
margin:30px auto;
li{
height:30px;
line-height:30px;
}
a{
float:left;
//&代表上一層選擇器
&:hover{
color:red;
}
}
span{
float:right;
}
}
（六）arguments變量（不常用）
@arguments包含了所有傳遞進(jìn)來的參數(shù)
eg:
.border_arg(@w:30px,@c:red,@xx:solid){
border:@arguments;
}
.test_arguments{
.border_arg(40px);//僅僅修改了w值
}
（七）避免編譯鹃愤、!important
eg:
//避免編譯
.test_01{
width:~'cal(300px - 30px)';//當(dāng)該計算需要由瀏覽器進(jìn)行 需要避免在css中計算完成
}
//important常用于調(diào)試簇搅，
.test_important{
.border_radius()!important;//對應(yīng)的編譯出來的css后面均帶有!important
}
