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