混合函数（Mixins as Functions)

优质

小牛编辑

130浏览

2023-12-01

在上一个小节的学习中，我们了解了 Mixins 作为一个函数时传入参数的使用方法，这个小节我们来介绍下具体介绍下混合函数，以及如何通过 Mixins 传入参数并返回参数。

1. 什么是混合函数？

Return variables or mixins from mixins 。——官方定义

慕课解释： Mixins 可以作为一个函数使用返回参数或者一个新的 Mixins 。

在混合函数，返回的参数可以当作变量使用，但是返回 Mixins 时比较抽象，大家要多加练习理解。

2. 语法详情

Mixins 不仅可以对样式表进行复用，它也可以看作是一个函数。

类似于 JS 等编程语言中函数，它也具有函数的诸多特征，比如传入参数、返回参数等。

比如我们需要声明一个函数返回 @width、@height 两个变量，我们可以这样定义一个 Mixins 。

.return() {
  @width:  80%;
  @height: 20px;
}

然后我们在使用这两个参数的样式表中引入 .mixins() 即可。

.callback {
  .return();
  width:  @width;
  height: @height;
}

编译后的结果如下：

.callback {
  width:  80%;
  height: 20px;
}

3. 使用场景

混合函数可以对传入参数进行处理后返回，封装判断、循环及计算逻辑，从而达到复用的效果。

4. 返回参数

混合函数可对传入参数进行计算处理。

输入代码

.img(@line, @row) {
  @width: ((@row+ @line) / 2);
}

img {
  .img(20px, 50px); // 引入 mixin
  width: @width;    // 使用返回值（@width）
}

输出代码

img {
  width: 35px;
}

5. 返回 Mixins

混合函数可以返回一个 Mixins 并引入使用。

输入代码

.return-mixins(@color; @size) { 
  .mixins() { //返回 mixins
    background: @color;
    fonts-size: @size;
  }
}

#id {
  .return-mixins(red; 28px);
  .mixins(); //引用返回的 mixins
}

输出代码

#id {
  background: red;
  fonts-size: 28px;
}

6. 经验分享

在 Mixins 中定义的变量和混合函数是仅对调用方来说是可见的。比如说下面的用法就是错误的：

	.a {
    .b(@color){
      color: @color;
    }
  }

  .c{
     // 此处会报错，因为 .b() 是属于 .a 的作用域，所以 .c 不能直接调用 .b()
    .b(#fff);
  }

如果调用方的作用域中，包含相同名称的变量（包括由另一个混合函数定义的变量），则保留原本定义的变量。从父作用域所继承的变量则会被覆盖重写。

输入代码

  @width: 300px; // 父作用域变量会被覆盖

  .a() {
    @width: 100px;
  }

  .b {
    .a();
    @width: 200px; // 调用方作用域中的变量需在 mixins 之后才不会被 mixins 中的变量覆盖。
    width: @width;
  }

输出代码

.b {
  width: 200px;
}

7. 小结

本章节主要介绍了 Mixins 作为一个函数返回值或 Mixins 的用法。

混合函数返回值时可以处理传入的参数，对参数进行一系列复杂的参数处理。
混合函数返回 Mixins 时注意需要先调用混合函数，才能调用返回的 Mixins 。