04.less中的混合，带参数混合

less中的混合

1. 什么是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();
  }
}

2. 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中，你还可以像函数一样定义一个带参数的属性集合

1. 带参数的混合

.whc(@w, @h, @c){
  width: @w;
  height: @h;
  background: @c;
}

2. 带参数的混合, 并且带默认值

.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);
}

• 赋值通过冒号赋值，参数也是，不是等于号
• 即使混合有三个参数，你可以只传一个，且可以指定给哪一个形参传值