Less基本语法的使用方法

Posted MrLQZ

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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/

以上是关于Less基本语法的使用方法的主要内容,如果未能解决你的问题,请参考以下文章

花了两天时间学习了 sass, less, stylus的基本语法和简单使用, 谈谈感受.

less基本语法

Less的一些基本知识

Less语法整理

关于less

visual studio 2019不能在vue文件中直接识别less语法