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

发表于 | 分类于

less中的混合

  1. 什么是less中的混合(Mixin)?将需要重复使用的代码封装到一个类中,在需要使用的地方调用封装好的类即可，在预处理的时候less会自动将用到的封装好的类中的代码拷贝过来，本质就是ctrl+c –> ctrl + v
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.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();
  }
}
  1. less中混合的注意点:如果混合名称的后面没有(), 那么在预处理的时候,会保留混合的代码（意思是在输出的css中，会含有.center这部分代码），如果混合名称的后面加上(),那么在预处理的时候,不会保留混合的代码，（意思是在输出的css中，不会含有.center这部分代码，但是调用它的其他类还是复制这部分代码过来了）
1
2
3
4
5
6
7
8
9
10
11
12
13
.center{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.center(){
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

带参数混合

带参数混合:在LESS中，你还可以像函数一样定义一个带参数的属性集合

  1. 带参数的混合
1
2
3
4
5
.whc(@w, @h, @c){
  width: @w;
  height: @h;
  background: @c;
}
  1. 带参数的混合, 并且带默认值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.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);
}
  • 赋值通过冒号赋值，参数也是，不是等于号
  • 即使混合有三个参数，你可以只传一个，且可以指定给哪一个形参传值

混合的arguments

  • @arguments在mixins内部有特殊意义，调用mixin时，它包含所有传入的参数。如果你不想单个单个的处理参数，这一特性是很有用的
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
The @arguments variable （@arguments 变量）
@arguments在mixins内部有特殊意义，调用mixin时，它包含所有传入的参数。如果你不想单个单个的处理参数，这一特性是很有用的：
.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
  -webkit-box-shadow: @arguments;
     -moz-box-shadow: @arguments;
          box-shadow: @arguments;
}
.big-block {
  .box-shadow(2px; 5px);
}

返回结果为：
.big-block {
  -webkit-box-shadow: 2px 5px 1px #000;
     -moz-box-shadow: 2px 5px 1px #000;
          box-shadow: 2px 5px 1px #000;
}