Less混合Mixin传参应使用带前缀的参数名（如@btn-color）、显式传值、避免同名污染；嵌套调用需确保已声明或导入；守卫仅支持原子判断，禁用运算；Mixin内慎用嵌套规则，优先类名组合。
Less混合Mixin怎么传参才不会覆盖全局变量
参数化Mixin本质是函数，但Less里没作用域隔离，同名参数会意外污染外层变量。比如定义 .btn(@color: #007bff) 后，在调用处写 @color: red;，这个 @color 会覆盖后续所有同名变量。
- 始终用带前缀的参数名，比如
.btn(@btn-color: #007bff, @btn-padding: 8px)，避免裸名@color - 不依赖“外部变量自动注入”，所有值显式传入，哪怕重复写一次
@primary - 如果真要复用主题色，用
@import引入变量文件，而非靠Mixin参数穿透
为什么嵌套Mixin调用时样式没生效
Less里Mixin不是运行时执行，而是编译期展开；一旦在选择器内部调用未定义的Mixin，它就静默消失，不报错也不输出CSS。
- 检查调用前是否已
@import或声明该Mixin，尤其跨文件时容易漏@import "mixins.less" - 避免在媒体查询内调用未用
.mixin-name() when (condition)守卫声明的Mixin，守卫缺失会导致整个块被跳过 - 调试技巧：临时加个
content: "debug";到Mixin体里，看是否出现在编译结果中
带条件逻辑的Mixin怎么写才不卡死编译
Less的守卫（when）不支持复杂表达式或函数调用，isnumber(@x + 1) 这类写法会直接让编译器崩溃或返回空结果。
- 守卫只接受原子判断：
isnumber(@x)、@x > 0、@type = button，别对参数做运算后再判断 - 需要分支逻辑时，拆成多个同名Mixin重载：
.size(@s) when (isnumber(@s)) { font-size: @s * 1px; }和.size(@s) when (isstring(@s)) { font-size: @s; } - 慎用递归——Less不优化尾递归，5层以上可能触发栈溢出或超时
如何让Mixin输出的CSS选择器保持可维护性
Mixin展开后生成的选择器层级和命名完全由调用位置决定，容易出现 .card .header .title .text 这种难以定位的深度链。
立即学习“前端免费学习笔记（深入）”；
- 避免在Mixin里写嵌套规则，比如
&:hover { color: @hover-color; }，除非你明确需要相对定位 - 优先用类名组合代替嵌套：
.btn-primary而非.btn .primary，Mixin只负责声明单个类的行为 - 若必须生成BEM式结构，用字符串拼接：
.bem(@block, @element) { @{block}__@{element} { ... } }，但注意Less 4.0+才稳定支持变量插入选择器
最麻烦的其实是调试：编译后的CSS没了Mixin痕迹，得靠source map或手动加注释标记来源——这点很多人上线前才意识到
