22eee改成什么了，带参混合

今天给各位分享22eee改成什么了的知识，其中也会对带参混合进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

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

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

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

4、.xkd(@num){nborder-radius:@num;nborder-top:@num;n}nn.good{n.xkd(10px);n}n

编译成CSS代码：

5、.good{nborder-radius:10px;nborder-top:10px;n}n

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

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

7、.xkd(@num:5px;@fontsize:14px){nborder-radius:@num;nfont-size:@fontsize;n}n.one{n.xkd();n}n.two{n.xkd(10px,28px);n}n

编译成CSS代码：

8、.one{nborder-radius:5px;nfont-size:14px;n}n.two{nborder-radius:10px;nfont-size:28px;n}n

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

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

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

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

编译成CSS代码：

12、.one{ncolor:#ccc;nfont-size:18px;n}n.two{ncolor:red;nfont-size:22px,#eee;n}n@arguments变量

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

13、.xkd(@a:10;@b:20px;@c:10px;@d:20px){npadding:@arguments;n}nn.one{n.xkd();n}n.two{n.xkd(20px,40px,20px,40px);n}n

编译成CSS代码：

14、.one{npadding:1020px10px20px;n}n.two{npadding:20px40px20px40px;n}n剩余参数

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

15、.xkd(@rest...){nborder:@rest;n}nn.good{n.xkd(1px;solid;#000);n}n

编译成CSS代码：

16、.good{nborder:1pxsolid#000;n}n总结

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

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

关于22eee改成什么了到此分享完毕，希望能帮助到您。