高级参数和@reset变量
如果你希望你的mixin接受数量不定的参数,你可以使用“...”。在变量名后面使用它,它会将这些参数分配给变量
.mixin(...){/*接受0到N个参数*/}
.mixin(){/*不接受任何参数*/}
.mixin(@a:1){/*接受0到1个参数*/}
.mixin(@a:1;...){/*接受0到N个参数*/}
.mixin(@a;...){/*接受1到N个参数*/}
Less:
.mixin1(...){
padding:@arguments;
}
div{
.mixin1(10px);
div{
.mixin1(20px 30px);
div{
.mixin1(40px 50px 60px);
div{
.mixin1(70px 80px 90px 100px)
}
}
}
}
CSS:
div {
padding: 10px;
}
div div {
padding: 20px 30px;
}
div div div {
padding: 40px 50px 60px;
}
div div div div {
padding: 70px 80px 90px 100px;
}
.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,2px 5px);
}
}
CSS:
div {
padding: 10px;
}
div p {
padding: 2px 5px 2px 5px;
}
.mixin(@a;...){ } 接受1到N个参数
Less:
.mixin5(@a, ...){
padding:@arguments;
}
ul{
.mixin5(5px);
li{
.mixin5(2px 4px);
}
}
CSS:
ul {
padding: 5px;
}
ul li {
padding: 2px 4px;
}
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。