Less 混合函数

上一节我们学习了带参混合,当混合作为一个函数时是如何传入参数的。本节我们来学习混合函数,混合可以支持嵌套,接受参数和返回值。

混合范围

如果我们在一个混合中定义了变量,那么这个变量只能在这个混合或者引用了这个混合的区域中使用。但是有一个例外,就是如果调用者包含一个具有相同名称的变量,则该变量不会复制到调用者的作用域中,仅存在于调用者本地范围内的变量受到保护,而从父范围继承的变量将会被覆盖。

示例:
.xkd() {
  @w:  10px;
  @h:  20px;
}
.p1{
  .xkd();
  @w: 100px;
  width:  @w;
  height: @h;
}

编译成 CSS 代码:

.p1 {
  width: 100px;
  height: 20px;
}

Mixins 返回值

我们可以在 Mixins 中定义变量,并将作为它的返回值。

示例:
.xkd(@a, @b) {
  @width: @a + @b;
}

.good{
    .xkd(20px, 30px);  
    width: @width; 
}

编译成 CSS 代码:

.good {
  width: 50px;
}

上述代码中,我们在混合 .xkd 中定义了一个变量 @width,变量的值为两参数之和。然后在 .good 中引用了混合 .xkd,其中的 width 属性值为 @width 变量的值。

注意,只有在引用了 .xkd 后,才能使用 @width 变量,否则会报错:

.xkd(@a, @b) {
  @width: @a+@b;
}

.good{
    width: @width; 
}

编译时报错:
Less 混合函数_第1张图片

返回 Mixins

我们可以在 Mixins 中定义 Mixins,并且可以将之用作返回值。

示例:
.out(@num) {
  .inner(){
    width: @num;
  }
}

.xkd{
  .out(100px);  
  .inner(); 
}

编译成 CSS 代码:

.xkd {
  width: 100px;
}

总结

Mixins 中不管是定义变量还是定义 Mixins,都仅对调用者可见。例如在一个 Mixins 中定义了一个变量,只有在引用了这个 Mixins 的样式类中,才能够使用这个变量,否则会导致报错。

你可能感兴趣的