less混合函数调用失败主因是定义与调用间的隐性断层：缺括号致其被识别为class、导入路径/顺序错误导致不可见、参数错位不报错但结果异常、嵌套中遗漏&引发作用域泄漏。
Less混合函数（Mixin）调用失败，90%的情况不是语法写错，而是定义和调用之间存在隐性断层——编译器根本没把它当Mixin看，或者作用域里压根找不到它。
定义时漏了括号，它就不是Mixin
Less对括号极其敏感：缺括号 = 普通class规则，不是可调用的Mixin。编译器不会报错，但调用时直接提示undefined mixin。
- 错误写法：
.flex-center { display: flex; justify-content: center; }→ 这是class，不是Mixin - 正确写法：
.flex-center() { display: flex; justify-content: center; }→ 必须带()，哪怕无参 - 调用也必须带括号：
.flex-center();，写成.flex-center;会被当成class选择器匹配，找不到就报Unknown word
路径或导入顺序导致Mixin不可见
Less没有模块作用域，@import是文本拼接。如果Mixin定义在mixins/layout.less里，但你没在当前文件顶部@import "mixins/layout.less"，它就不存在。
- 常见陷阱：变量/.mixin()定义文件没放在所有
@import链最前面，比如variables.less在components/button.less之后引入，那按钮里的@primary-color就是undefined - 循环引用也会静默破坏可见性：A.less
@importB.less，B.less又@importA.less → 编译卡死或Mixin丢失，不报语法错误 - 验证方法：把Mixin定义直接复制到调用文件顶部，如果能调通，说明就是导入路径或顺序问题
参数类型或数量不匹配，但编译器不报错
Less参数靠位置绑定，无类型校验。传错、漏传、顺序颠倒都不会中断编译，但生成的CSS可能完全不对。
- 定义是
.btn(@color, @bg, @padding)，调用写成.btn(#007bff, 12px 24px)→ 第二个参数被当成了@bg，@padding取默认值（如果有），否则为空 - 字符串和数值混用：
@size: 1rem，却传"16px"，结果font-size: "16px"→ CSS无效 - 解决办法：优先用默认值兜底，比如
.btn(@color: #007bff, @bg: #fff, @padding: 6px 12px)；更健壮的做法是改用Map参数：.btn(("color": #dc3545, "padding": 10px 20px))，内部用map-get()取值
嵌套中调用Mixin，&没写对导致样式泄漏
在选择器块内调用Mixin时，如果忘了&，Less会把生成的CSS提升到全局作用域，看起来像“调用失效”，其实是规则跑偏了。
- 错误写法：
.card { @media (min-width: 992px) { .responsive-font(1.25rem); } }→ 编译后@media脱离.card，影响所有元素 - 正确写法：
.card { @media (min-width: 992px) { & { .responsive-font(1.25rem); } } }，或更干净地把媒体查询封装进Mixin内部 - 注意
&__title和& .__title生成的选择器完全不同，前者是BEM子类，后者是后代选择器，写错一个字符，目标元素就选不上
最难排查的其实是“没报错但没生效”——它往往发生在导入链深处、参数默认值被意外覆盖、或@import (reference)让Mixin存在却不可调用。别急着重写，先用console.log式调试：把Mixin内容临时复制到调用点，一层层往上挪，直到它突然工作，那个边界就是问题所在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
