Less mixin 必须带括号定义（如 .center() { ... }），调用时参数数量、顺序、类型须严格匹配；带参 mixin 适合数值/颜色等固定结构样式，guard 适合主题切换等分支逻辑；变量作用域为块级，mixin 内部变量不对外生效；编译时 mixin 会重复展开，高频复杂 mixin 易致 CSS 膨胀，应拆分为语义化小单元。
Less mixin 怎么定义和调用才不会报错
定义 mixin 时漏写括号或参数不匹配，是 .mixin-name() 报 undefined mixin 的最常见原因。它不是函数，没有自动类型推导，调用时必须严格匹配定义签名。
- 定义带参 mixin 一定要写括号，哪怕无参：
.center() { display: flex; justify-content: center; }—— 缺括号会被当成普通 class 规则 - 调用时参数数量、顺序、类型（如单位）必须一致；
.size(12px)不能传"12px"字符串（除非定义里明确接收字符串） - 避免在 selector 内部直接写
.mixin-name（没括号），这会生成一个空 class 名，而不是执行混入
什么时候该用带参数 mixin，什么时候用 guard 条件判断
参数 mixin 适合控制数值、颜色、尺寸等可变但结构固定的样式；guard 更适合分支逻辑强、CSS 输出差异大的场景，比如根据主题切换整套间距规则或断点行为。
- 纯数值变化（字体大小、边距、圆角）：用参数 mixin，例如
.pad(@s) { padding: @s; } - 需要条件分支（如
@theme = dark时改背景色 + 文字色）：加 guard，.theme-style(@theme) when (@theme = dark) { background: #1a1a1a; color: #fff; } - 混用常见：先用参数接收基础值，再用 guard 切换微调，避免写一堆重复的 if 分支
嵌套 mixin 和变量作用域容易踩的坑
Less 的作用域是“块级”的，mixin 内部定义的变量默认只在它内部生效，外部无法读取；反过来，外部变量能被 mixin 访问，但若同名会被覆盖。
- 不要指望在
.btn() { @color: red; }里定义的@color能影响后续规则 —— 它的作用域仅限于该 mixin 块 - 想让 mixin “返回”值？只能靠输出 CSS，或者用
@arguments+ 拼接选择器实现间接复用 - 嵌套调用时（如
.card() { .shadow(); .pad(16px); }），每个被调用的 mixin 独立作用域，互不污染，这点比想象中安全
编译后 CSS 体积变大？检查 mixin 是否被过度展开
mixin 不是运行时机制，它在编译阶段就被复制粘贴进所有调用处。如果一个复杂 mixin 在 20 个地方调用，就会生成 20 份相同 CSS，而不是一次定义、多次引用。
立即学习“前端免费学习笔记（深入）”；
- 高频复用的简单规则（如
.clearfix）没问题；但含大量声明、媒体查询、嵌套的 mixin，要警惕膨胀 - 替代方案：对纯视觉修饰（如阴影、过渡）考虑用 CSS 自定义属性 + JS 控制，或抽成独立 class 类名在 HTML 中组合
- 用
lessc --no-js编译后检查输出，确认是否真有冗余 —— 有时只是觉得“写了多”，实际 CSS 并没增加
真正难处理的是 mixin 和响应式断点、主题变量、伪类状态三者叠加时的组合爆炸。这时候与其硬塞进一个 mixin，不如拆成语义化的小单元，靠命名约定组织调用顺序。
