less快速学习

Posted 2020-10-30 Geminiyu

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

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
}