带参数的Mixin

Posted 2020-10-15 Web先生的博客

带参数的mixin

在Less中，还可以像函数一样定义一个带参数的mixin, 这种形式叫做 Parametric Mixin，即带参数的混入。如：

1. // 定义一个样式选择器
2. .borderRadius(@radius){
3.     border-radius: @radius;
4. }

然后，在其他选择器中像这样调用它：

1. // 使用已定义的样式选择器
2. #header {
3.     .borderRadius(10px);   // 把 10px 作为参数传递给样式选择器
4. }
5. .btn {
6.     .borderRadius(3px);   // 把 3px 作为参数传递给样式选择器
7. }

编译后的CSS代码为：

1. #header {
2.    border-radius: 10px;
3. }
4. .btn {
5.    border-radius: 3px;
6.  }

还可以给 Mixin 的参数设置默认值，有了默认值，在调用它的时候，如果没有提供该参数，它就会使用默认值。比如，设置默认值为 5px：

1. .borderRadius(@radius:5px){
2.    border-radius: @radius;
3.  }
4. .btn {
5.    .borderRadius;
6.  }

由于在调用 .borderRadius 时没有传递参数，它就会使用默认值 5px。编译后的CSS代码为：

1. .btn {
2.    border-radius: 5px;
3.  }

Mixin还可以带多个参数，参数之间使用逗号或分号隔开。如：

1. .border(@width, @style, @color) {
2.     border: @width @style @color;
3. }
4. h2 {
5.     .border(2px, dashed, green);
6. }

编译后的CSS代码为：

1. h2 {
2.   border: 2px dashed #008000;
3. }

虽然多个参数可以使用分号或者逗号分隔，推荐使用分号分隔，因为逗号既可以表示混合的参数，也可以表示一个参数中一组值的分隔符。

使用分号作为参数分隔符，就意味着可以将逗号分隔的一组值作为一个变量处理。换句话说，如果编译器在混入的定义或者调用中找到至少一个分号，就会假设参数是使用分号分隔的，则逗号将被看作是一个参数中一组值的分隔符。如：

.name(1, 2, 3; 4, 5) 就包含2个参数，1, 2, 3是一个参数，4, 5是一个参数。每个参数都是通过逗号分隔的一组值。

.name(1, 2, 3) 就包含3个参数，每个参数只含一个数字。也可以使用一个象征性的分号，如 .name(1, 2, 3;)，就可以创建一个只含一个参数，但参数包含一组值的混入。

当包含多个参数时，Mixins是通过参数的名称，而不是位置来引用参数。也就是说，在使用的时候，如果提供参数名称，则参数的顺序并不重要。命名参数使代码更清晰、更容易阅读。如：

1. .mixin(@color: black, @fontSize: 10px) {
2.   color: @color;
3.   font-size: @fontSize;
4. }
5. .class1 {
6.   .mixin(@fontSize: 20px, @color: #F5A9D0);
7. }
8. .class2 {
9.   .mixin(#F79F81, @fontSize: 20px);
10. }

编译后的CSS代码为：

1. .class1 {
2.   color: #f5a9d0;
3.   font-size: 20px;
4. }
5. .class2 {
6.   color: #f79f81;
7.   font-size: 20px;
8. }

除此之外，像 javascript 中 arguments一样，Mixin 也有这样一个变量：@arguments。当 Mixin 引用这个参数时，它表示传递进来的所有参数。

很多情况下，@arguments参数可以省去很多代码。比如，在定义 box-shadow 的属性值时，如果不想单独处理每一个参数的话，就可以像这样写：

1. .boxShadow(@x:0,@y:0,@blur:1px,@color:#000){
2.    box-shadow: @arguments;
3.  }
4.  #header {
5.    .boxShadow(2px,2px,3px,#f36);
6.  }

编译后的CSS代码为：

1. #header {
2.    box-shadow: 2px 2px 3px #f36;
3.  }

如果需要在 mixin 中不限制参数的数量，就可以在变量名后添加“...”，表示这里可以使用可变参数。这一点跟C语言比较类似。请看以下简单实例：

对于某些属性，它的参数个数是不确定的，而具体的参数个数，只有在使用的时候才知道，这种情况就适合使用可变参数。比如，padding 属性可以接受1个、或2个、或3个、或4个参数，就可以使用可变参数。Less代码如下：

1. .padding(...) {
2.     padding: @arguments;
3. }
4. .class1 { 
5.     .padding(20px);
6. } 
7. .class2 { 
8.     .padding(20px 30px);
9. } 
10. .class3 { 
11.     .padding(20px 30px 40px); 
12. } 
13. .class4 { 
14.     .padding(20px 30px 40px 50px); 
15. } 
16. 编译后的C

SS代码为：

1. .class1 {
2.   padding: 20px;
3. }
4. .class2 {
5.   padding: 20px 30px;
6. }
7. .class3 {
8.   padding: 20px 30px 40px;
9. }
10. .class4 {
11.   padding: 20px 30px 40px 50px;
12. }

可变参数的常见形式如下：

.mixin(...) { }          // it matches arguments from 0-n

.mixin() { }           // it matches exactly 0 arguments

.mixin(@x: 1) { }      // it matches arguments from 0-1

.mixin(@x: 1, ...) { }   // it matches arguments from 0-n