Less基本語法的使用方法

編譯less有3種方法：

1.koala工具編譯（推薦）   工具下載網站：http://koala-app.com/index-zh.html

2.node插件編譯

3.瀏覽器編譯

 

lesss基本語法：

//less變量
@ser_width:300px; /*@變量名:值*/
.box{width:ser_width; }
//輸出 .box{width:300px;} //less混合
.border{border:1px solid #aaa;.box;}
//輸出 .border{border:1px solid #aaa;width:300px;} //less混合可帶參數（可多個）
.border2(@border_width){border:@border_width solid #aaa;}
.box2{.border2(30px;)}
//輸出 .box2{border:30px solid #aaa;} //less混合帶默認值（可多個）
.border3(@border_width:10px){border:@border_width solid #aaa;}
.box3{.border3()}
//輸出 .box3{border:10px solid #aaa;} //less匹配模式畫三角形
.div(top,@w:10px,@c:red){
    border-width:@w; 
    border-color:@c transparent transparent transparent;
    border-style:solid dashed dashed dashed;
}
//@_的意思是匹配到上面的樣式（後面的參數必定要一致）
.div(@_,@w:10px,@c:red){  
    width: 0;
    height: 0;
    overflow: hidden;
}
.div{.div1(top);}
//輸出 .div{
            width: 0;
            height: 0;
            overflow: hidden; //overflow解決ie6下最小高度的問題
            border-width: 10px;  //決定三角形的大小
            border-color: red transparent transparent transparent;  //那邊朝下就把那邊設顏色，其他透明
            border-style: solid dashed dashed dashed;  //dashed解決ie6下黑邊的方法  
        } //less運算
@ser_width:300px;
box4{width:@ser_width+20;}
//輸出 .box4{width:320px;} //less嵌套
.div{
    .div1{width: 40px;}
    a{width: 30px;}
}
//輸出 .div .div1{width:320px;} .div a{width: 30px;} //less的@arguments變量
.div5(@w:10px,@xx:solid,@c:#aaa){
    border:@arguments;
}
//輸出  .div5{border:10px solid #aaa;} //less避免編譯
.div6{width: ~'calc(300px-30px)';}  //calc是要瀏覽器計算值
//輸出  .div6{width:calc(300px-30px);}

 

Less中文網站：http://lesscss.cn/