混合mixin函数_混合函数（Mixins as Functions) - Less 入门教程

在上一个小节的学习中，我们了解了 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 。