什么是 LESS
LESS 是一种动态样式语言，它是基于 CSS 的语法并增加了变量、运算、函数等特性。使用 LESS 可以让 CSS 写起来更加方便和灵活。
什么是 mixin
mixin 是 LESS 中一个非常重要的概念，它类似于函数，在 LESS 文件中定义了 mixin 后，可以在任何位置使用，从而实现一些复用性较高的样式定义。
“undefined mixin” 问题是什么
在使用 LESS 的过程中，可能会遇到一个 “undefined mixin” 的错误，这个错误会提示你没有找到相应的 mixin ，导致样式无法正常运行。通常情况下，这个错误的原因可能有以下几种：
- mixin 定义时命名有误
- mixin 定义和调用不在同一个文件中
- mixin 定义在调用之后
解决方法
针对上述情况，我们分别进行解决。
检查 mixin 命名是否有误
首先我们需要检查 mixin 的命名是否有误，可以通过搜索整个项目来寻找相应的定义位置。如果没有找到，则需要检查 mixin 的定义位置是否正确。通常情况下，mixin 定义应该在全局范围内，而非嵌套在某个 CSS 规则里。
确认 mixin 定义与调用在同一个文件中
如果 mixin 定义和调用在不同的文件中，我们需要确认两个文件是否都被正确引用。这一般可以在 LESS 文件的开头使用 @import 指令来实现。例如：
@import "variables.less"; @import "mixins.less"; @import "main.less";
在 main.less 中就可以使用 variables.less 和 mixins.less 中定义的变量和 mixin 了。
确认 mixin 定义在调用之前
最后，如果 mixin 定义在调用之后，我们需要将 mixin 定义提到前面或是将 mixin 调用放到 mixin 定义之后。这是因为 LESS 编译器是按照代码顺序编译的，如果调用时 mixin 还没有被定义，那么就会出现 “undefined mixin” 的错误。
示例代码
以下是一个 mixin 的示例代码：
// javascriptcn.com 代码示例
// 定义 mixin
.border-radius (@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
// 使用 mixin
.box {
.border-radius(5px);
}在这个例子中，我们定义了一个 .border-radius() 的 mixin，然后在 .box 中使用了这个 mixin。如果在 mixin 的定义和调用之间存在任何问题，那么就会出现 “undefined mixin” 的错误。
总结
在 LESS 中，mixin 是一个非常重要的概念。我们可以借助 mixin 来简化样式定义，提高代码的复用性。但在使用 mixin 的过程中，也要避免出现 “undefined mixin” 的错误。通过以上方法，我们可以在遇到问题时快速的找到并解决问题，从而更好的发挥 LESS 的作用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6531e2467d4982a6eb3e4733