LESS参数混合

在 LESS 中，参数混合（Mixin）是一种将一段样式代码封装起来，可以通过传递参数来动态生成样式的方式。使用 Mixin 可以大大减少代码重复，提高代码的可维护性和可复用性。

参数混合可以接受任意数量的参数，并且可以使用命名参数来传递参数值。命名参数可以使得使用者更加清晰地了解每个参数的作用和含义。下面是一个常见的参数混合示例：

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

这个混合用于添加圆角边框，可以接受一个可选的参数 @radius，如果未指定则默认值为 5px。使用时可以直接调用这个混合：

.rounded {
  .border-radius;
}

或者通过命名参数传递参数值：

.card {
  .border-radius(@radius: 10px);
  border: 1px solid #ccc;
}

混合传递多个参数

参数混合还可以接受多个参数，可以通过逗号分隔来传递多个参数值。例如，下面这个混合可以用于添加带边框和填充的框：

.box-model(@padding, @border-radius, @border-width, @border-color) {
  padding: @padding;
  -webkit-border-radius: @border-radius;
  -moz-border-radius: @border-radius;
  border-radius: @border-radius;
  border: @border-width solid @border-color;
}

可以通过以下方式传递这些参数：

.box {
  .box-model(10px, 5px, 1px, #ccc);
}

也可以通过命名参数传递参数值：

.box {
  .box-model(
    @padding: 10px;
    @border-radius: 5px;
    @border-width: 1px;
    @border-color: #ccc;
  );
}

混合嵌套

LESS 还允许在混合中嵌套其他的混合。例如，我们可以在之前的圆角混合中嵌套另一个混合来添加边框和阴影效果：

.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
  .box-shadow;
  .border;
}

.box-shadow(@x: 0, @y: 0, @blur: 1px, @color: #000) {
  -webkit-box-shadow: @x @y @blur @color;
  box-shadow: @x @y @blur @color;
}

.border(@width: 1px, @style: solid, @color: #000) {
  border: @width @style @color;
}

然后我们就可以通过调用 .border-radius 混合来同时生成圆角、边框和阴影效果：

.rounded-box {
  .border-radius(5px);
}

参数混合的默认值

在定义混合时还可以使用 @arguments 变量来获取所有传递进来的参数。例如，我们可以创建一个可以接受任意数量的参数的混合：

.multi-property(@arguments...) {
  @temps: ~"";
  @index: 1;
  @length: length(@arguments);

  .loop-args() when (@index =< @length) {
    @temps: ~"@{temps} @{arguments[@index]}";
    @index+: 1;
    .loop-args();
  }
  
  @{temps};
}

这个混合将会接受任意数量的参数，并且可以将这些参数合并为一个字符串作为属性的取值。例如：

.my-class {
  .multi-property(color, background-color, border, padding);
}

将会产生以下的样式规则：

.my-class {
  color: "";
  background-color: "";
  border: "";
  padding: "";
}

如果我们希望某些参数可以有默认值，那么可以通过将这些参数定义为带默认值的变量来实现：

.another-class {
  .multi-property(
    color,
    background-color,
    border,
    padding: 10px
  );
}

这样，如果这些参数没有被传递，那么它们将会使用默认值。