高级参数和@reset变量
如果你希望你的mixin接受数量不定的参数，你可以使用“...”。在变量名后面使用它，它会将这些参数分配给变量
|
1
2
3
4
5
|
.mixin(...){/*接受0到N个参数*/}
.mixin(){/*不接受任何参数*/}
.mixin(@a:1){/*接受0到1个参数*/}
.mixin(@a:1;...){/*接受0到N个参数*/}
.mixin(@a;...){/*接受1到N个参数*/}
|
.mixin(...){ } 接受0到N个参数
Less：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
.mixin1(...){
padding:@arguments;
}div{ .mixin1(10px);
div{
.mixin1(20px 30px);
div{
.mixin1(40px 50px 60px);
div{
.mixin1(70px 80px 90px 100px)
}
}
}
} |
CSS：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
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：
|
1
2
3
4
5
6
|
.mixin2(){
width:200px;
}p{ .mixin2;
} |
CSS：
|
1
2
3
|
p { width: 200px;
} |
.mixin(@a:1){ } 接受0到1个参数
Less：
|
1
2
3
4
5
6
|
.mixin3(@red1:#e4393c){
color:@red1;
}span{ .mixin3;
} |
CSS：
|
1
2
3
|
span { color: #e4393c;
} |
.mixin(@a:1;...){ } 接受0到N个参数
Less：
|
1
2
3
4
5
6
7
8
9
|
.mixin4(@a:10px, ...){
padding:@arguments;
}div{ .mixin4;
p{
.mixin4(2px,5px,2px 5px);
}
} |
CSS：
|
1
2
3
4
5
6
|
div { padding: 10px;
}div p { padding: 2px 5px 2px 5px;
} |
.mixin(@a;...){ } 接受1到N个参数
Less：
|
1
2
3
4
5
6
7
8
9
|
.mixin5(@a, ...){
padding:@arguments;
}ul{ .mixin5(5px);
li{
.mixin5(2px 4px);
}
} |
CSS：
|
1
2
3
4
5
6
|
ul { padding: 5px;
}ul li { padding: 2px 4px;
} |
本文转自 frwupeng517 51CTO博客，原文链接:http://blog.51cto.com/dapengtalk/1863332