带多个参数的混合

什么是多参数：

  1. 一个组合可以带多个参数，参数之间可以用分号或者逗号分割。
  2. 但是推荐使用分号分割，因为逗号符号有两个意思。它可以理解为mixins参数分隔符或者css列表分隔符。

官方说明

  1. 两个参数，并且每个参数都是逗号分隔的列表：.name(1,2,3;something.ele)
  2. 三个参数，并且每个参数都包含一个数字:.name(1,2,2)
  3. 使用伪造的分号创建mixin，调用的时候参数包含一个逗号分割的css列表:.name(1,2,3;)
  4. 逗号分隔默认值：.name(@param1:red,blue)

使用同样的名字和同样数量的参数定义多个混合是合法的。在被调用时，LESS会应用到所有可以应用的混合上

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.mixin(@color; @padding:xxx; @margin: 2) {
  color-3: @color;
  padding-3: @padding;
  margin: @margin @margin @margin @margin;
}
.division{
  .mixin(red;)
}
.division {
  .mixin(1,2,3;something, ele;132);
}
.division {
  .mixin(1,2,3);
}
.division {
  .mixin(1,2,3;);
}

编译后的css如下：

1
2
3
4
5
.division {
  color: 1, 2, 3;
  margin: 10px;
  padding: 20px;
}

如果传参的括号里面全部都是以“，”分割，那么会依次传给各个参数值，如果传参的括号里面既有“，”又有“；”那么，会把“；”前面的看作一个整体，传给一个参数值

定义多个具有相同名称和参数数量的混合：

定义多个具有相同名称和参数数量的mixins是合法的。Less会使用它可以应用的属性。如果使用mixin的时候只带一个参数，比如.mixin(green)，这个属性会导致所有的mixin都会强制使用这个明确的参数。实例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.mixin(@color) {
  color-1: @color;
}
.mixin(@color; @padding:2) {
  color-2: @color;
  padding-2: @padding;
}
.mixin(@color; @padding; @margin: 2) {
  color-3: @color;
  padding-3: @padding;
  margin: @margin @margin @margin @margin;
}
.some .selector{
  .mixin(#008000);
}

编译后的css如下：

1
2
3
4
5
.some .selector {
  color-1: #008000;
  color-2: #008000;
  padding-2: 2;
}

命名参数

引用mixin时可以通过参数名称而不是参数的位置来为mixin提供参数值。任何参数都以用过它的名称来使用，这样就不必按照任意特定的顺序来使用参数

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.mixin(@color: black; @margin: 10px; @padding: 20px) {
  color: @color;
  margin: @margin;
  padding: @padding;
}
.class1 {
  .mixin(@margin: 20px; @color: #33acfe);
}
.class2 {
  .mixin(#efca44; @padding: 40px);
}
.class3{
  .mixin(@padding: 80px;)
}

其编译后的css文件如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.class1 {
  color: #33acfe;
  margin: 20px;
  padding: 20px;
}
.class2 {
  color: #efca44;
  margin: 10px;
  padding: 40px;
}
.class3 {
  color: #000000;
  margin: 10px;
  padding: 80px;
}

@arguments变量

@arguments代表所有的可变参数

注意：

  1. @arguments代表所有可变参数，参数的先后顺序就是你的（）括号内的参数的先后顺序

  2. 在使用的赋值，值的位置和个数也是一一对应的，只有一个值，把值赋值给第一个，两个值，赋值给第一个和第二个，三个值赋值给第三个……以此类推，但是需要注意的是假如我想给第一个和第三个赋值，你不能写（值1，，值3），必须把原来的默认值写上去！

实例

1
2
3
4
5
6
.border(@x:solid,@c:red){
  border: 21px @arguments;
}
.div1{
  .border(solid);
}

其编译后的css文件为：

1
2
3
.div1 {
  border: 21px solid #ff0000;
}

匹配模式

传值的时候定义一个字符，在使用的时候使用哪个字符，就调用那天规则。

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.border(all,@w: 5px){
  border-radius: @w;
}
.border(t_l,@w:5px){
  border-top-left-radius: @w;
}
.border(t_r,@w:5px){
  border-top-right-radius: @w;
}
.border(b-l,@w:5px){
  border-bottom-left-radius: @w;
}
.border(b-r,@w:5px){
  border-bottom-right-radius: @w;
}
footer{
  .border(t_l,10px);
  .border(b-r,10px);
  background: #33acfe;
}

编译后css如下：

1
2
3
4
5
6
7
footer {
  border: 21px t_l 10px;
  border-top-left-radius: 10px;
  border: 21px b-r 10px;
  border-bottom-right-radius: 10px;
  background: #33acfe;
}

混合的返回值

在使用混合时，有时会用到一些运算，这时就有返回值。使用实例如下:

1
2
3
4
5
6
7
8
9
.average(@x, @y) {
  @average: ((@x + @y) / 2);
  @he:(@x + @y);
}
div {
  .average(16px, 50px);
  padding: @average;
  margin: @he;
}

编译后的css如下：

1
2
3
4
div {
  padding: 33px;
  margin: 66px;
}