什么是 mixin？
Mixin 是一种在 LESS 中定义可重用样式块的方式。可以将一些常用的样式组合成一个 mixin，下次需要使用这些样式时只需要调用这个 mixin 即可。
Mixin 的定义方式如下：
.mixin {
/* mixin 样式代码 */
}Mixin 调用方式如下：
.element {
.mixin;
}mixin 嵌套
在 LESS 中，我们可以在 mixin 中嵌套其他的 mixin，以达到复用代码的目的，如下：
-- -------------------- ---- -------
------- -
---------- -----
------- -
------ -----
-
-
-------- -
--------
------- -
--------
-
-上面的代码中，我们在 mixin1 中嵌套了一个 mixin2，然后在 element 元素中调用 mixin1 ，同时在 element 的 hover 状态下调用 mixin2。
mixin 嵌套层级限制
然而在 LESS 中， mixin 的嵌套是有层级限制的。默认情况下，LESS 允许嵌套四级。
比如下面的代码，我们在第四级 mixin 中嵌套了第五级 mixin，会得到一个嵌套层级错误的提示：
-- -------------------- ---- -------
------- -
------- -
------- -
------- -
------- -
-
-
-
-
-错误提示信息如下：
Maximum call stack size exceeded in _mixin.less on line 6, column 1:
5 {
--------------------------------------^
这是因为 mixin5 的嵌套层级已经超过了 LESS 的默认限制。
为了避免在 LESS 的 mixin 嵌套中出现过深的层级，我们可以使用 & 来代替选择器，减少嵌套层级。如下：
-- -------------------- ---- -------
------- -
------- -
------- -
- ------- -
- ------- -
-
-
-
-
-这样虽然还是五级嵌套，但是由于 mixin4 和 mixin5 使用了 & 代替选择器，相当于把 mixin4 和 mixin5 赋给 mixin3 ，这样就相当于只有三级嵌套。
总结
在 LESS 的 mixin 中，我们可以通过 mixin 嵌套来达到复用代码的目的，但是由于 mixin 嵌套存在层级限制，如果层级嵌套过深将会得到一个错误提示。我们可以使用 & 来代替选择器，减少嵌套层级，避免在 LESS 的 mixin 嵌套中出现过深的层级。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64abd88b48841e98947b7004