Less 带参混合

上一节我们学习了 Less 中的混合，混合使用起来也很简单方便。本节我们来学习带参混合，混合可以带一个或多个参数，多个参数之间通过逗号或分号分隔。一般我们使用分号分隔参数，因为在 Less 中逗号有两种意思，可以表示 Mixins 参数分隔符或 CSS 列表分隔符。

带参Mixins

在声明 Mixins 时，参数需要加一个 @ 前缀。

示例：

例如声明了一个混合 .xkd ，这个混合带一个 @num 参数：

.xkd(@num){
  border-radius: @num;
  border-top: @num;
}

.good{
  .xkd(10px);
}

编译成 CSS 代码：

.good {
  border-radius: 10px;
  border-top: 10px;
}

上述代码中 border-radius 和 border-top属性的值是未知的，由传入的 @num 参数决定。所以在引用这个混合时，需要给参数赋值，否则在编译代码时会报错。

默认参数

我们可以给 Mixins 中所带的参数设置默认值，这样如果引入 Mixins 时未传入参数，将使用默认参数的值。

示例：

例如下面这段代码：

.xkd(@num:5px; @fontsize:14px){
  border-radius: @num;
  font-size: @fontsize;
}
.one{
  .xkd();
}
.two{
  .xkd(10px, 28px); 
}

编译成 CSS 代码：

.one {
  border-radius: 5px;
  font-size: 14px;
}
.two {
  border-radius: 10px;
  font-size: 28px;
}

可以看到上述代码中，.one 中引入 .xkd 时没有给指定参数赋值，输出时使用的是默认参数的值。

而 .two 中引入 .xkd 时给参数赋值了，最后使用的是引入时所赋的参数值。

参数顺序

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

示例：

.mixin(@color: red; @fontSize: 14px) {
  color: @color;
  font-size: @fontSize;
}
.one{
  .mixin(@color: #ccc, @fontSize: 18px);
}
.two{
  .mixin(@fontSize: 22px,#eee; );
}

编译成 CSS 代码：

.one {
  color: #ccc;
  font-size: 18px;
}
.two {
  color: red;
  font-size: 22px, #eee;
}

@arguments 变量

如果使用带参混合时，不想使用单个参数，可以使用 @arguments ，@arguments 变量可以包括所有传递的参数。

示例：

.xkd(@a:10; @b:20px; @c:10px; @d:20px) {
  padding:@arguments;
}

.one{
  .xkd();
}
.two{
  .xkd(20px, 40px, 20px, 40px);
}

编译成 CSS 代码：

.one {
  padding: 10 20px 10px 20px;
}
.two {
  padding: 20px 40px 20px 40px;
}

剩余参数

Mixins 中可以使用可变数量的参数，... 可以表示其余的参数。

示例：

.xkd(@rest...) {
  border: @rest;
}

.good{
  .xkd(1px; solid; #000);
}

编译成 CSS 代码：

.good {
  border: 1px solid #000;
}

总结

本节我们学习了带参 Mixins，包括默认参数、@arguments 、剩余参数等，这和 JavaScript 中函数的参数很类似，熟练掌握这几种参数的使用方法，可以更加灵活的运用 Mixins。

查看更多内容：https://www.9xkd.com/