less快速学习

Posted Geminiyu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了less快速学习相关的知识,希望对你有一定的参考价值。

写在前面:大概写这么个意思哈,注释样式什么的大家忽略掉哈哈哈

1 变量

eg:
@test_width:300px
.box{
widht:@test_width;
htight:@test_width;
}

2 混合

.border{
border:1px solid pink;
}
.box{
widht:@test_width;
htight:@test_width;
.border;
}
//混合--带参数
 
.border2(@border_width){
border:@border_width solid pink;
}
 
.test_border2{
.border2(30px);
}
 
// 混合--带默认值
.border3(@border_width:30px){
border:@border_width solid pink;
}
 
.test_border3{
.border2();//border:30px solid pink;
}

3 匹配模式

//以三角形为例
.trianglt(top,@w:5px,@c:#ccc){
border-width:@w;
border-color:transparent transparent @w transparent;
border-style: dashed dashed solid dashed ;
}
.trianglt(right,@w:5px,@c:#ccc){
border-width:@w;
border-color:transparent transparent transparent @w;
border-style: dashed dashed dashed solid ;
}
 
//公共的,每个调用的就算传参不同,也会带
.trangle(@_,@w:5px,@c:#ccc){
width:0;
height:0;
overflow:hidden;
}
//调用
.sanjiao{
.trangle(top,100px);
}

4 运算

@test_01:300px;
.box_02{
width:(@test_01-20)*5;//这个20可带可不带单位,两者只要有一个有单位即可
}

5 嵌套

<ul>
<li><a></a><span></span></li>
</ul>
.list{
width:20px;
height:20px;
li{
float:left; //相当于 .list li
a{
color:#000;// .list li a
}
}
a{
color:#000;//.list a可写在li里,但是为了避免多层嵌套
&:hover{
color:red;//a:hover,&表示上一层选择器
}
}
}
@arguments
 
.border_arg(@w:30px,@c:red,@xx:solid){
border:@arguments;//border:@w @c @xx;
}

6 避免编译(忽略不编译)

.test{
width:~‘calc(300px-30px)‘ //width:calc(300px-30px )
}
 
 
important
 
.test_important{
.test()!important;//width:30px!important;里面的每一个都会带上important
}

 

以上是关于less快速学习的主要内容,如果未能解决你的问题,请参考以下文章

less快速入门

leetcode_1292. Maximum Side Length of a Square with Sum Less than or Equal to Threshold_[二维前缀和](代码片段

less快速入门

less快速入门

webpack 快速入门 系列

Less快速入门