Less-混合

混合

将需要重复使用的代码封装到一个类中, 在需要使用的地方调用封装好的类即可在预处理的时候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();
  }
}

带参数混合

// 这里就是带参数的混合
// .whc(@w, @h, @c){
//   width: @w;
//   height: @h;
//   background: @c;
// }
// 这里就是带参数的混合, 并且带默认值
.whc(@w:100px, @h:100px, @c:pink){
  width: @w;
  height: @h;
  background: @c;
}
.box1{
  // 这里是给混合的指定形参传递数据
  .whc(@c:red);
}
.box2{
  .whc(300px, 300px, blue);
}

可变参数混合

less中的@arguments和js中的arguments一样, 可以拿到传递进来的所有形参
less中的==…表示可以接收0个或多个参数==
如果形参列表中使用了…, 那么…必须写在形参列表最后

// 传入所有参数
.animate(@name, @time, @mode, @delay){
  //transition: @name @time @mode @delay;
  transition: @arguments;
}
// 接收0个或多个参数
.animate(...){
  //transition: @name @time @mode @delay;
  transition: @arguments;
}
// 必须传入一个参数
.animate(@name, ...){
  //transition: @name @time @mode @delay;
  transition: @arguments;
}
// 必须传入二个参数
.animate(@name, @time, ...){
  //transition: @name @time @mode @delay;
  transition: @arguments;
}
div{
  width: 200px;
  height: 200px;
  background: red;
  //transition: all 4s linear 0s;
  //.animate(all, 4s, linear, 0s);
  .animate(all, 4s, linear, 0s);
}
div:hover{
  width: 400px;
  height: 400px;
  background: blue;
}