带多个参数的混合
什么是多参数:
- 一个组合可以带多个参数,参数之间可以用分号或者逗号分割。
- 但是推荐使用分号分割,因为逗号符号有两个意思。它可以理解为mixins参数分隔符或者css列表分隔符。
官方说明
- 两个参数,并且每个参数都是逗号分隔的列表:.name(1,2,3;something.ele)
- 三个参数,并且每个参数都包含一个数字:.name(1,2,2)
- 使用伪造的分号创建mixin,调用的时候参数包含一个逗号分割的css列表:.name(1,2,3;)
- 逗号分隔默认值:.name(@param1:red,blue)
使用同样的名字和同样数量的参数定义多个混合是合法的。在被调用时,LESS会应用到所有可以应用的混合上
实例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| .mixin(@color; @padding:xxx; @margin: 2) { color-3: @color; padding-3: @padding; margin: @margin @margin @margin @margin; } .division{ .mixin(red;) } .division { .mixin(1,2,3;something, ele;132); } .division { .mixin(1,2,3); } .division { .mixin(1,2,3;); }
|
编译后的css如下:
1 2 3 4 5
| .division { color: 1, 2, 3; margin: 10px; padding: 20px; }
|
如果传参的括号里面全部都是以“,”分割,那么会依次传给各个参数值,如果传参的括号里面既有“,”又有“;”那么,会把“;”前面的看作一个整体,传给一个参数值
定义多个具有相同名称和参数数量的混合:
定义多个具有相同名称和参数数量的mixins是合法的。Less会使用它可以应用的属性。如果使用mixin的时候只带一个参数,比如.mixin(green),这个属性会导致所有的mixin都会强制使用这个明确的参数。实例如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| .mixin(@color) { color-1: @color; } .mixin(@color; @padding:2) { color-2: @color; padding-2: @padding; } .mixin(@color; @padding; @margin: 2) { color-3: @color; padding-3: @padding; margin: @margin @margin @margin @margin; } .some .selector{ .mixin(#008000); }
|
编译后的css如下:
1 2 3 4 5
| .some .selector { color-1: #008000; color-2: #008000; padding-2: 2; }
|
命名参数
引用mixin时可以通过参数名称而不是参数的位置来为mixin提供参数值。任何参数都以用过它的名称来使用,这样就不必按照任意特定的顺序来使用参数
实例
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| .mixin(@color: black; @margin: 10px; @padding: 20px) { color: @color; margin: @margin; padding: @padding; } .class1 { .mixin(@margin: 20px; @color: #33acfe); } .class2 { .mixin(#efca44; @padding: 40px); } .class3{ .mixin(@padding: 80px;) }
|
其编译后的css文件如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| .class1 { color: #33acfe; margin: 20px; padding: 20px; } .class2 { color: #efca44; margin: 10px; padding: 40px; } .class3 { color: #000000; margin: 10px; padding: 80px; }
|
@arguments变量
@arguments代表所有的可变参数
注意:
@arguments代表所有可变参数,参数的先后顺序就是你的()括号内的参数的先后顺序
在使用的赋值,值的位置和个数也是一一对应的,只有一个值,把值赋值给第一个,两个值,赋值给第一个和第二个,三个值赋值给第三个……以此类推,但是需要注意的是假如我想给第一个和第三个赋值,你不能写(值1,,值3),必须把原来的默认值写上去!
实例
1 2 3 4 5 6
| .border(@x:solid,@c:red){ border: 21px @arguments; } .div1{ .border(solid); }
|
其编译后的css文件为:
1 2 3
| .div1 { border: 21px solid #ff0000; }
|
匹配模式
传值的时候定义一个字符,在使用的时候使用哪个字符,就调用那天规则。
实例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| .border(all,@w: 5px){ border-radius: @w; } .border(t_l,@w:5px){ border-top-left-radius: @w; } .border(t_r,@w:5px){ border-top-right-radius: @w; } .border(b-l,@w:5px){ border-bottom-left-radius: @w; } .border(b-r,@w:5px){ border-bottom-right-radius: @w; } footer{ .border(t_l,10px); .border(b-r,10px); background: #33acfe; }
|
编译后css如下:
1 2 3 4 5 6 7
| footer { border: 21px t_l 10px; border-top-left-radius: 10px; border: 21px b-r 10px; border-bottom-right-radius: 10px; background: #33acfe; }
|
混合的返回值
在使用混合时,有时会用到一些运算,这时就有返回值。使用实例如下:
1 2 3 4 5 6 7 8 9
| .average(@x, @y) { @average: ((@x + @y) / 2); @he:(@x + @y); } div { .average(16px, 50px); padding: @average; margin: @he; }
|
编译后的css如下:
1 2 3 4
| div { padding: 33px; margin: 66px; }
|
最后更新时间:
当前页访问次数 10