高级参数和@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
|
.mixin
1
(...){
padding
:@arguments;
}
div{
.mixin
1
(
10px
);
div{
.mixin
1
(
20px
30px
);
div{
.mixin
1
(
40px
50px
60px
);
div{
.mixin
1
(
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
|
.mixin
2
(){
width
:
200px
;
}
p{
.mixin
2
;
}
|
CSS：
|
1
2
3
|
p {
width
:
200px
;
}
|
.mixin(@a:1){ } 接受0到1个参数
Less：
|
1
2
3
4
5
6
|
.mixin
3
(@red
1:
#e4393c
){
color
:@red
1
;
}
span{
.mixin
3
;
}
|
CSS：
|
1
2
3
|
span {
color
:
#e4393c
;
}
|
.mixin(@a:1;...){ } 接受0到N个参数
Less：
|
1
2
3
4
5
6
7
8
9
|
.mixin
4
(@a:
10px
, ...){
padding
:@arguments;
}
div{
.mixin
4
;
p{
.mixin
4
(
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
|
.mixin
5
(@a, ...){
padding
:@arguments;
}
ul{
.mixin
5
(
5px
);
li{
.mixin
5
(
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
