Less – Mixin 高级应用

2019年5月9日

意见反馈

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也可以作为返回值返回。