上一节我们学习了Less中的混合，使用起来也非常简单方便。在本节中，我们将学习如何与参数混合。混合可以带一个或多个参数，多个参数用逗号或分号分隔。一般我们用分号来分隔参数，因为逗号在Less中有两种含义，可以代表Mixins参数分隔符，也可以代表CSS列表分隔符。带参数的Mixins声明Mixins时，参数需要加上@前缀。示例：例如，声明一个带有@num参数的mixin.xkd：.xkd(@num){border-radius:@num;border-top:@num;}.good{.xkd(10px);}编译成CSS代码：.good{border-radius:10px;border-top:10px;}上面代码中border-radius和border-top属性的值是未知的，是由传入的@num参数决定的。所以在引用这个mix的时候，需要赋值给参数，否则编译代码时会报错。默认参数我们可以为Mixins中的参数设置默认值，这样在引入Mixins时如果没有传入参数，就会使用默认参数值。例子：比如下面的代码：.xkd(@num:5px;@fontsize:14px){border-radius:@num;字体大小：@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的时候，给参数赋值，最终使用的是import时赋值的参数值。ParameterOrderMixins中的参数可以没有特定的顺序定义，而是通过它们的参数名称来定义。示例：.mixin(@color:red;@fontSize:14px){color:@color;font-size:@fontSize;}.one{.mixin(@color:#ccc,@fontSize:18px);}.two{.mixin(@fontSize:22px,#eee;);}编译成CSS代码：.一个{颜色：#ccc;font-size:18px;}.two{颜色:红色;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:1020px10px20px;}.two{padding:20px40px20px40px;}其余参数Mixins可以使用可变数量的参数，...可以指示其余参数。例子：.xkd(@rest...){border:@rest;}.good{.xkd(1px;solid;#000);}编译成CSS代码：.good{border:1pxsolid#000;}总结这一节我们学习了带参数的Mixins，包括默认参数、@arguments、剩余参数等，这些和JavaScript中函数的参数非常相似。掌握这些参数的使用，可以让你更灵活的使用Mixins。查看更多内容：https://www.9xkd.com/
