一、簡(jiǎn)介
二、編譯工具
kaola（推薦）、node.js、瀏覽器
三、用法
（一）變量
@變量名:值;
（二）混合
將一個(gè)包含多個(gè)屬性的類作為另一個(gè)類的子屬性集
可以讓一個(gè)類接收一個(gè)變量值
便于“相同屬性較多 但部分屬性不同”的類的復(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);//若無(wú)傳入?yún)?shù)則默認(rèn)為5px
}
（三）匹配模式
類似于js中的if 但不完全相同；
應(yīng)用其他類型時(shí) 根據(jù)首個(gè)參數(shù)匹配同名的對(duì)應(yīng)樣式
如定義了.triangle（left） .triangle（right）.triangle(top)三個(gè)同名類，應(yīng)用哪個(gè)類由匹配決定 類似于c語(yǔ)言中的同名函數(shù)的重載

（四）運(yùn)算

      可以給屬性賦變量進(jìn)行運(yùn)算后的值
    // 運(yùn)算的兩個(gè)對(duì)象只要有一個(gè)帶單位即可
 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)來(lái)的參數(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ì)算需要由瀏覽器進(jìn)行 需要避免在css中計(jì)算完成
}
//important常用于調(diào)試，
.test_important{
.border_radius()!important;//對(duì)應(yīng)的編譯出來(lái)的css后面均帶有!important
}