Less学习笔记 -- Mixins(混合)二
高级参数和@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;}
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。