龙空技术网

Less 参数混合

MAO大侠 145

前言:

今天你们对“css竖线分隔符 菜鸟”大概比较珍视,你们都想要分析一些“css竖线分隔符 菜鸟”的相关文章。那么小编也在网上收集了一些关于“css竖线分隔符 菜鸟””的相关资讯,希望小伙伴们能喜欢,咱们快快来了解一下吧!

Mixins 具有多个参数参数可以使用逗号或分号分隔。 (建议使用分号,因为逗号具有双重含义:可以将其解释为mixin参数分隔符或者是css列表分隔符);使用逗号作为mixin分隔符使不可能创建逗号分隔的列表作为参数。 参数mixin使用一个或多个参数,通过参数和它的属性来扩展Less的功能,以达到在混合到另一个块时自定义mixin输出的效果。如果编译器在mixin调用中或者是声明中看到至少一个分号,那么假设这个歌参数用分号分隔的话,并且所有逗号都属于css列表,我们可以有以下几种情况:两个参数,每一个包含逗号分隔的列表:.name(1, 2, 3; something, else)

三个参数,并且每个包含一个数字:.name(1, 2, 3)

使用虚拟分号创建混入调用一个参数包含逗号分隔的CSS列表:.name(1, 2, 3;)

逗号分隔的默认值:.name(@param1: red, blue;)命名参数

mixin引用时可以通过名称而不是位置来提供参数值,可以通过名称来引用任何参数任何参数都可以通过它的名称来引用,而不是特定的顺序 。

.mixin(@color: green; @font-size: 18px; @padding: 15px; @margin: 10px;) { color: @color; font-size: @font-size; padding: @padding; margin: @margin;}.name1 { .mixin( @color: blue; @margin: 20px;);}.name2 { .mixin(red; @padding: 30px; @font-size:40px;);}​// 输出,改变后的值改变,没有重新赋值的值默认原值.name1 { color: blue; font-size: 18px; padding: 15px; margin: 20px;}.name2 { color: red; padding: 30px; font-size:40px; margin: 10px;}
@arguments 变量

@arguments 在JavaScript中代表所有的参数,在mixin内部同样有特殊含义,它包含调用mixin时传递的所有参数;如果我们不想处理单个参数,它将会非常适用。

.box-shadow(@x: 0; @y: 0; @blur: 20px; @color: green) { -webkit-box-shadow: @arguments; -moz-box-shadow: @arguments; box-shadow: @arguments;}.argVar { .box-shadow(2px; 11px);}​// 输出.argVar { -webkit-box-shadow: 2px 11px 20px green; -moz-box-shadow: 2px 11px 20px green; box-shadow: 2px 11px 20px green;}
高级参数和@rest变量

... 如果您希望mixin接受可变数量的参数,则可以使用。在变量名之后使用此命令会将这些参数分配给变量。

// 1:匹配0-n参数.mixin(...) {}// 2:完全匹配0个参数.mixin() {} // 3:匹配0-1个参数.mixin(@a: 1) {} // 4:匹配0-n参数.mixin(@a: 1; ...) {} // 5:匹配1-n个参数.mixin(@a; ...) {} 
模式匹配

通过将参数传递给它来改变mixin的行为。

标签: #css竖线分隔符 菜鸟