less混合

Posted 2020-12-04 wzndkj

混合(mixin)变量

.border{
　　border: 5px solid pink;
}
.box{
　　width: 300px;height:300px;
　　.border;
}
=>
.border {
　　border: 5px solid pink;
}
.box {
　　width: 300px;
　　height: 300px;
　　border: 5px solid pink;
}

这个就叫做混合，在box里面有一段跟border的样式，把border直接拿过来就可以

 

比如一个场景，两个div很像，只有唯一一行的样式的不一样的情况

.box{
　　width: 300px;
　　height:300px;
　　border:1px solid #abcdef;
}
.box2{
　　.box;
　　margin-left: 100px;
}
=>
.box {
　　width: 300px;
　　height: 300px;
　　border: 1px solid #abcdef;
}
.box2 {
　　width: 300px;
　　height: 300px;
　　border: 1px solid #abcdef;
　　margin-left: 100px;
}

像这种重用的样式，直接拿过来

可带参数带混合

.border(@border_width){
　　border:@border_width solid pink;
}
.test_2{
　　.border(30px)
}
=>
.test_2 {
　　border: 30px solid #ffc0cb;
}

 

 

可带参数时的默认值

.border(@border_width:10px){
　　border:@border_width solid pink;
}
.test{
　　.border()
}
.test2{
　　.border(20px)
}
=>
.test {
　　border: 10px solid #ffc0cb;
}
.test2 {
　　border: 20px solid #ffc0cb;
}

没默认值是不带值会报错

这个有什么好处，比如做一些兼容的时候

.border_radius(@rds:5px){
　　-webkit-border-radius:@rds;
　　-moz-border-radius:@rds;
　　border-radius: @rds;
}
.radius_test{
　　width: 100px;
　　height: 40px;
　　background-color:pink;
　　.border_radius();
}
=>
.radius_test {
　　width: 100px;
　　height: 40px;
　　-color: pink;
　　-webkit-border-radius: 5px;
　　-moz-border-radius: 5px;
　　border-radius: 5px;
}