less mixins 是编译期展开的参数化 css 代码块，需带括号调用、支持默认值与守卫条件，但静态展开易致体积膨胀，应优先使用 css 原生机制。
Less Mixins 本质是参数化 CSS 代码块
Mixins 不是魔法，它就是把一段可复用的样式逻辑封装成带名字的“函数”，调用时能传参、能条件分支、能嵌套。关键在于：它只在编译期展开，不生成额外的 CSS 类名，也不会污染全局选择器。
常见错误是把它当 CSS 预处理器里的“继承”用——比如写 .btn() { color: blue; } 然后 .primary { .btn(); }，结果发现 .primary 没生效，其实是漏写了括号：.btn() 才是调用，.btn 只是声明。
- 必须带括号调用，哪怕无参：
.reset()，不是.reset - 不能在嵌套规则外直接调用（比如根级
.icon() { ... }后紧跟.btn { .icon(); }是合法的；但根级写.icon();会报错） - 参数默认值写法是
@color: #000，不是color = #000
带参数的 Mixin 怎么写才不踩坑
参数名和变量名共用同一命名空间，所以别用 @border 当参数名，再在里面写 border: @border;——这会递归引用自己，编译失败。实际用 @border-width 或 @b 更安全。
示例：一个响应式字体 mixin：
.font-size(@size: 16px, @min: 14px, @max: 20px) {
font-size: @size;
@media (max-width: 768px) {
font-size: clamp(@min, @size * 0.8, @max);
}
}
- 参数顺序很重要：调用时位置传参（
.font-size(18px, 12px)）会覆盖前两个，默认值只对末尾未传的生效 - 想支持关键字传参？用
@arguments或拆成多个 mixin，Less 原生不支持命名参数 - 如果参数是选择器片段（如
@suffix: hover），拼接时要用字符串插值：&:@{suffix} { ... }，不是&:@suffix
如何避免 Mixin 导致 CSS 体积暴增
Mixin 展开是静态复制，每次调用都生成一份完整样式代码。一个含 10 行样式的 mixin 被调用 50 次，就多出 500 行 CSS —— 这比写重复类名还糟。
- 优先用 CSS 自身机制：能用
inherit、currentColor、var(--x)解决的，别用 mixin - 复杂逻辑（如渐变、阴影组合）才值得封装；纯颜色/尺寸建议用变量 +
var() - 用
.mixin-name() when (@debug = true)加守卫条件，开发期展开，上线前设@debug: false让它不输出
嵌套 Mixin 和递归调用的实际限制
Less 支持在 mixin 内部调用其他 mixin，甚至自己调用自己（递归），但深度超过 20 层会报 Maximum call stack size exceeded 错误，且无法控制展开层数。
典型场景是生成栅格系统：
.make-col(@n, @i: 1) when (@i =
- 守卫表达式
when (@i = 必须写全，<code>= 不是 <code> - 递归调用必须有终止条件，且参数要显式递进（
(@i + 1)），不能靠变量自增 - 这种写法适合构建固定规模的工具类，不适合运行时动态计算——那是 JS 的事
真正难的是权衡：什么时候该用 mixin，什么时候该交由 CSS 自定义属性或 JS 控制。Mixins 是编译期的，一旦写死就不可变；而 style="--color: red" 是运行时的，灵活但需 JS 配合。别为了复用，把简单问题搞成编译依赖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
