高级参数和@reset变量

如果你希望你的mixin接受数量不定的参数,你可以使用“...”。在变量名后面使用它,它会将这些参数分配给变量

.mixin(...){/*接受0到N个参数*/}.mixin(){/*不接受任何参数*/}.mixin(@a:1){/*接受0到1个参数*/}.mixin(@a:1;...){/*接受0到N个参数*/}.mixin(@a;...){/*接受1到N个参数*/}

.mixin(...){ } 接受0到N个参数

Less:

.mixin1(...){padding:@arguments;}div{.mixin1(10px);div{.mixin1(20px30px);div{.mixin1(40px50px60px);div{.mixin1(70px80px90px100px)}}}}


CSS:

div{padding:10px;}divdiv{padding:20px30px;}divdivdiv{padding:40px50px60px;}divdivdivdiv{padding:70px80px90px100px;}


.mixin(){ } 不接受任何参数 (这个其实就相当于不输出混合集)

Less:

.mixin2(){width:200px;}p{.mixin2;}


CSS:

p{width:200px;}



.mixin(@a:1){ } 接受0到1个参数

Less:

.mixin3(@red1:#e4393c){color:@red1;}span{.mixin3;}


CSS:

span{color:#e4393c;}



.mixin(@a:1;...){ } 接受0到N个参数

Less:

.mixin4(@a:10px,...){padding:@arguments;}div{.mixin4;p{.mixin4(2px,5px,2px5px);}}


CSS:

div{padding:10px;}divp{padding:2px5px2px5px;}



.mixin(@a;...){ } 接受1到N个参数

Less:

.mixin5(@a,...){padding:@arguments;}ul{.mixin5(5px);li{.mixin5(2px4px);}}


CSS:

ul{padding:5px;}ulli{padding:2px4px;}