LESS 中的 Mixin 与 Function 有何区别？
在 LESS 中， Mixin 和 Function 是两个非常重要、常用的概念。虽然它们都可以用来实现变量的复用，但它们之间也具有自己的区别。
Mixin
Mixin 用于将一组或多组 CSS 样式的代码块合并为一个样式组，从而实现样式的复用。
Mixin 的定义方式为 @mixin mixin_name {} 。其中，mixin_name 为你自己定义的一个名称，用于调用 Mixin 的时候使用。
下面是一个 Mixin 的示例：
------ ---------------------- -
---------------------- --------
------------------- --------
-------------- --------
-
---- -
-------- --------------------
-在上面的代码中，我们定义了一个名为 border-radius 的 Mixin，用于设置元素的边框圆角半径。
我们使用 @include 语句来调用 Mixin，引入编写好的代码块。这里我们调用我们之前定义好的 Mixin，并将参数 $radius 设置为 10px。
最终编译后的 CSS 代码如下：
---- -
---------------------- -----
------------------- -----
-------------- -----
-Mixin 的作用非常简单，但也十分强大，它可以用于任何需要复用的样式。不过需要注意，Mixin 只能被调用，而不能被直接赋值给变量。
Function
Function 的作用与 Mixin 类似，同样用于实现样式的复用。不过 Function 的作用更加灵活，它可以接受参数，并返回结果。Function 的定义方式为 function-name() {...}。
下面是一个 Function 的示例：
------------ -------- ---------------- ---- ------ - ------ -------------------- ----------------- -
在上面的代码中，我们定义了一个名为 lighten 的 Function，用于调整颜色的亮度。这里我们使用了两个参数，分别是 @base-color 和 @lighten-amount。
最终编译后的 CSS 代码如下：
------ - ------ -------- -
Function 相比于 Mixin，还有一个有趣的功能，就是可以将 Function 的返回值直接赋值给变量。下面是一个示例代码：
------------ -------- ---------------- ---- ------- -------------------- ----------------- ------ - ------ ------- -
在上面的代码中，我们将 lighten 的返回结果赋值给了一个变量 @color，最终编译后的 CSS 代码如下：
------ - ------ -------- -
由此我们可以看出，Function 比较特殊的另外一个功能是可以赋值变量。
总结
在 LESS 中， Mixin 与 Function 虽然都可以用于样式的复用，但它们之间还是有着重要的不同。
Mixin 是一组或多组 CSS 语句的代码块，通过调用来实现样式的复用。同时，Mixin 不能赋值变量。
Function 则是通过在函数内定义参数和返回值来实现样式的复用。同时，它还可以将函数的返回结果赋值给变量。
所以，使用 Mixin 或者 Function，应该根据具体情况选择不同的方式进行开发。在实际使用中，记得根据业务需求及设计指南，合理使用 LESS 相应语言特性，以达到更好的开发效果。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65a0daa7add4f0e0ff90ccdd