Less基本语法的使用方法

Posted 2020-10-02 MrLQZ

编译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/