less mixin 参数应聚焦真实可变样式维度，命名须带语义前缀防污染，参数顺序即契约不可跳过，多参数需正交拆分、严格校验类型与默认值，数量宜控制在3–5个以内。
Less 的 Mixin 参数不是为了堆砌配置项，而是把「真正会变」的样式维度抽出来，让同一套逻辑能生成语义清晰、可预测的 CSS。参数滥用反而会让调用比直接写 CSS 还难懂。
参数命名必须带前缀，避免污染全局变量
Less 没有作用域隔离，裸名参数（如 @color）在调用时可能意外覆盖外层同名变量。比如你在组件里写了 @color: red;，后面所有用到 @color 的地方都会变成 red —— 包括你没意识到的按钮、卡片、表单。
- 正确做法：统一用语义+前缀，如
@btn-color、@card-border-radius、@input-padding-x - 错误写法：
.button(@color, @size)→ 调用时@color: #ff0000会污染后续所有@color - 默认值也需带前缀：
.button(@btn-color: #007bff, @btn-size: medium) - 如果真要复用主题色，靠
@import "variables.less"引入，而不是靠参数穿透
多参数必须按序传，不支持跳过或命名传参
Less 不识别 .btn(@size: large, @color: red) 这类 JS 风格写法，会直接报错 Expected ')' got ':'。参数顺序就是契约，错一位，整个样式就偏移。
- 定义是
.shadow(@x, @y, @blur, @color)，调用就必须是.shadow(0, 2px, 4px, rgba(0,0,0,0.15)) - 想“跳过”中间参数？不行。只能显式传占位值，如
.shadow(0, 2px, default, rgba(0,0,0,0.15))（前提是该参数有默认值） -
@arguments是逗号分隔的 list，不能直接塞进box-shadow这类空格分隔属性；要用extract()或join(" ", @arguments)转换 - 单位混杂时极易出错：传
"12"（字符串）和12px（带单位数值）行为完全不同，建议在 mixin 内加isunit(@size, px)校验
状态与尺寸必须正交拆分，别搞组合爆炸
一个 .button(@size, @variant, @state) 看似灵活，实际只要加一种尺寸、一种状态，组合数就翻倍。维护 20+ 个按钮变体时，没人记得清 .btn(small, primary, disabled) 和 .btn(primary, small, disabled) 哪个先定义。
- 正交做法：尺寸控制
height、padding、font-size；状态只管background、border-color、opacity - 用 map 管理尺寸：
@button-sizes: { small: (h: 24px, p: 0 8px, fs: 12px) }，再配合.button-size(@size)提取 - 状态用 guard 分支：
.button-state(@state) when (@state = hover) { background: darken(@bg, 10%); } - 调用链式组合：
.button-base(); .button-size(medium); .button-state(hover);，清晰、可调试、易增删
默认值设错会导致编译失败或样式错乱
Less 对参数类型完全不校验。.card(@shadow) 如果没设默认值，调用时漏传就会报错 variable @shadow is undefined；但设成 @shadow: false，又可能生成 box-shadow: false 这种无效 CSS。
- 默认值应是合法 CSS 值，且符合设计系统基线，如
@border-radius-base: 4px、@easing-standard: ease-out - 颜色类参数慎用函数推导默认值（如
@hover-bg: lighten(@bg, 8%)），确保基础色变化时结果仍在可用范围内 - 用
isnumber()或default()做兜底判断，防止传入空值或字符串导致编译中断 - 验证方式：在 mixin 里临时加
// debug: @bg注释，看编译后输出是否是你期望的值
最麻烦的其实是调试——编译后的 CSS 完全看不到 mixin 痕迹，source map 又常失效。真正稳的做法，是把参数控制在 3–5 个以内，每个都对应真实设计决策点，而不是为了“参数化”而参数化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
