less中的混合
- 什么是less中的混合(Mixin)?将需要重复使用的代码封装到一个类中,在需要使用的地方调用封装好的类即可，在预处理的时候less会自动将用到的封装好的类中的代码拷贝过来，本质就是ctrl+c --> ctrl + v
.center{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.father{
width: 300px;
height: 300px;
background: red;
.center();
.son{
width: 200px;
height: 200px;
background: blue;
.center();
}
}
- less中混合的注意点:如果混合名称的后面没有(), 那么在预处理的时候,会保留混合的代码（意思是在输出的css中，会含有.center这部分代码），如果混合名称的后面加上(),那么在预处理的时候,不会保留混合的代码，（意思是在输出的css中，不会含有.center这部分代码，但是调用它的其他类还是复制这部分代码过来了）
.center{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.center(){
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
带参数混合
带参数混合:在LESS中，你还可以像函数一样定义一个带参数的属性集合
- 带参数的混合
.whc(@w, @h, @c){
width: @w;
height: @h;
background: @c;
}
- 带参数的混合, 并且带默认值
.whc(@w:100px, @h:100px, @c:pink){
width: @w;
height: @h;
background: @c;
}
.box1{
//width: 200px;
//height: 200px;
//background: red;
//.whc(200px, 200px, red);
// 这里是给混合的指定形参传递数据
.whc(@c:red);
}
.box2{
//width: 300px;
//height: 300px;
//background: blue;
.whc(300px, 300px, blue);
}
- 赋值通过冒号赋值，参数也是，不是等于号
- 即使混合有三个参数，你可以只传一个，且可以指定给哪一个形参传值
