2.2.3 作为函数的mixin
优质
小牛编辑
133浏览
2023-12-01
在一个 mixin 内部定义的变量或 mixin,都调用者可见,因此,它们可以作为它的返回值。如,以下Less代码:
.count(@x, @y) {
@sum:(@x + @y);
@average: ((@x + @y) / 2);
}
上述代码在 .count 内部定义了两个变量 @sum 和 @average,则 .count 将拥有两个返回值。调用 .count 时,就可以通过变量 @sum 和 @average 来使用返回值。如:
div {
.count(10px, 30px); // 调用
margin: @sum; // 得到返回值 @sum,即10px + 30px
padding: @average; // 得到返回值 @average,即(10px + 30px) / 2
}
编译后的CSS代码为:
div {
margin: 40px;
padding: 20px;
}
除了在 mixin 内部定义的变量外,还可以在一个 mixin 中定义另一个 mixin,内部的 mixin 将成为外部 mixin 的返回值。如,以下Less代码:
.outerMixin(@value) {
.nestedMixin() {
line-height: @value*2;
}
}
p {
.outerMixin(2em);
.nestedMixin();
}
编译后的CSS代码为:
p {
line-height: 4em;
}