Less – Mixin 高级应用

Mixin的参数

带参数的Mixin是一种特殊的mixin,可以给其传入多个参数,被调用时动态输出样式。

less示例:

.border(@width; @style; @color) {  
    border: @width @style @color;  
}  
.myheader {  
    .border(5px; dashed; red);  
}  

上面的border mixin有三个参数:@width; @style; @color,mixin的输出由这些参数而定。

参数使用

  • 具有多个参数的Mixin – 在这种Mixin类型中,可以使用逗号或分号分隔参数。
  • 命名参数 – 在命名参数中,mixin使用参数值而不是位置名来提供参数值。
  • @arguments 变量 – @arguments变量包括调用mixin时传递的所有参数。
  • 变参和@rest变量 – 变参使用省略号(……)表示
  • 模式匹配 – 模式匹配通过传递参数来改变mixin的行为。

Mixin与函数

mixin与函数非常相似。Mixin可以嵌套,可以接受参数并返回值。

  • Mixin作用域 – mixin中的变量对调用者是可见的,并且可以直接使用。
  • 返回值 – 在mixin中定义的变量将作为它的返回值。
  • mixin中的mixin – mixin中的mixin也可以作为返回值返回。


浙ICP备17015664号 浙公网安备 33011002012336号 联系我们 网站地图  
@2019 qikegu.com 版权所有,禁止转载