参数混合（Parametric Mixins）

优质

小牛编辑

135浏览

2023-12-01

上一个小节中我们介绍了 Mixins 作为一个样式继承类实现了样式的复用功能，从这个小节开始我们来介绍下 Mixins 作为一个函数的用法，说到函数那么参数是必不可少的，所以我们这个小节先进行参数的介绍。

1. 什么是参数混合？

慕课解释：含有传入参数的 Mixins 。

在 Less 中传入参数的 Mixins 就叫做参数混合，我们可将其理解为含有参数的函数。参数的传入有多种方式，大体上与 ES6 函数中参数较为类似，大家如果有 JS 基础的话可以对比着进行理解。

2. 方法详情

在 Mixins 中属性值是固定的，但是我们可以通过传入参数的 Mixins 使属性值作为一个变量，类似于 JS 函数中的参数。

比如下面定义的这个 Mixins ：

.border-radius(@radius) {
  border-radius: @radius;
}

border-radius 的值是未知的，是由传入的 @radius 变量所决定的。请看下面的代码例子：

输入代码

.border-radius(@radius) {
  border-radius: @radius;
}

button {
  .border-radius(5px);
}

代码解释：第 6 行：当使用这个 Mixins 时（.border-radius(5px)）只需要把 @radius 这个变量的数值（5）传入即可。

输出代码

button {
  border-radius: 5px;
}

3. 使用场景

含有参数的 Mixins 主要应用于复用的属性“值”不定的场景下，例如 color 、 font-size 属性，同时参数也拓展了 Mixins 的使用场景。

4. 设置默认参数

设置默认参数后如果使用 Mixins 未传入参数，将取参数的默认值。

TIPS：未设置默认参数且使用 Mixins 时未传入参数编译会报错

输入代码

.circle(@radius: 5px) {
  border-radius: @radius;
}

button {
  .circle();
}

输出代码

button {
  border-radius: 5px;
}

5. 设置多个参数

5.1 定义多个参数

当 Mixins 同时包含多个参数时，多个参数之间使用 ; 或者 , 分隔。建议使用 ; ，因为在 Less 中逗号有两种含义：代表 Mixins 参数分隔符或 CSS 列表分隔符。

如果使用 , 作为分隔符，就不能使用含有 , 的属性值作为参数。此外，如果参数之间有一个 ; 作为分隔符，编译器则会认为 , 属于属性值的一部分。

输入代码

.primary(@color; @padding; @margin: 2px) {
  color: @color;
  padding: @padding;
  margin-top: @margin; 
}

button {
  .primary(#ffffff; 5px);
}

输出代码

button {
  color: #ffffff;
  padding: 5px;
  margin-top: 5px; 
}

5.2 参数顺序

Mixins 中的参数可以不按照特定的顺序定义，可以直接使用其参数名称进行定义。

输入代码

.mixin(@color: black; @margin: 10px; @padding: 20px) {
  color: @color;
  margin: @margin;
  padding: @padding;
}

.primary {
  .mixin(@margin: 20px; @color: #33acfe);
}

.success {
  // 第一个参数未填写参数名称，所以代表的是 @color
  // 第二个参数名称为 @padding ，所以说 @margin 参数未传入会取默认值
  .mixin(#efca44; @padding: 40px);
}

输出代码

.primary {
  color: #33acfe;
  margin: 20px;
  padding: 20px;
}

.success {
  color: #efca44;
  margin: 10px;
  padding: 40px;
}

5.3 @argument 变量

@argument 代表调用 Mixins 时传入的所有参数。

如果我们想要同时处理所有参数，可以使用 @argument 变量。

输入代码

.box-shadow(@x: 0; @y: 0; @z: 1px; @color: #000) {
  box-shadow: @arguments;
}

button {
  .box-shadow(2px; 5px);
}

输出代码

button {
  box-shadow: 2px 5px 1px #000;
}

5.4 剩余参数

如果想要接收可变数量的参数，我们可以使用 ... 代表其余的参数。

.mixin(...)         // 匹配第 0-N 个参数
.mixin(@a: 1; ...)  // 匹配第 0-N 个参数
.mixin(@a; ...)     // 匹配第 1-N 个参数
.mixin(@a; @rest...) {
   // @rest 表示在 @a 后的所有参数
   // @arguments 表示所有参数
}

示例代码

.box-shadow(...) {
  box-shadow: @rest;
}

button {
  .box-shadow(2px; 5px; 1px; #000);
}

输出代码

button {
  box-shadow: 2px 5px 1px #000;
}

5.5 经验分享

同时定义多个名称和参数相同的 Mixins 是可行的，编译时将会使用所有可以应用的属性。

输入代码

.img(@color) {
  bgckground: @color;
}

.img(@color; @padding: 2px) {
  color: @color;
  padding: @padding;
}

div {
  .img(#000);
}

输出代码

div {
  backgroundcolor: #000;
  color: #000;
  padding: 2px;
}

当多个相同名称的 Mixins 存在时，调用时将会选择最符合的那个 Mixins 。

所以我们可以定义一个标识，以便于引用正确的 Mixins 。比如：

输入代码

@postion: right;

.margin(left; @size) {
  margin-left: @size;
}

.margin(right; @size) {
  margin-right: @size;
}

button {
  .margim(@postion; 20px);
}

输出代码

button {
	margin-right: 20px;
}

6. 总结

本章节主要学习了 Mixins 参数使用的几种方式，这几种方式与 ES6 中函数的参数思想较为类似，有默认参数、@argument、剩余参数等，熟练应用可以使你的 Mixins 灵活性更强，但是一定要注意两个同名 Mixins 之间的覆盖问题，为 Mixins 加上命名空间可以防止类似的问题发生。