乐趣区

关于less:Less-带参混合

jiezi

上一节咱们学习了 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/

退出移动版