less mixin带参数的基本写法是使用@mixin-name(@param: default)定义，参数以@开头，支持默认值和可变参数；需用when配合isxxx()函数做类型判断实现多态；命名空间调用为.ns.mixin()，作用域内变量须显式传入；避免过度抽象，优先用于重复模式而非单属性微调。
Less mixin 带参数的基本写法
Less 的 .mixin-name() 支持参数，语法和函数接近，但不需要 return，直接展开为 CSS 规则。参数可设默认值，也可用变量名接收任意数量的值（类似 rest 参数）。
常见错误是把括号写成 .mixin-name{}（漏掉括号），或在调用时传入未定义变量导致编译失败。
- 参数名必须以
@开头，如@color、@size - 默认值用
@param: #000形式，支持颜色、数字、字符串甚至其他 mixin 调用 - 可选参数必须放在参数列表末尾，否则无法跳过中间项
- 不支持命名参数调用（如
.border(@width: 2px)不合法）
如何处理可变参数和类型判断
Less 没有运行时类型系统，但可通过 isnumber()、iscolor()、ispixel() 等内置函数做简易判断，配合 when 实现条件分支。
典型场景是写一个通用 .shadow()：既接受单个值（如 2px 2px 4px #000），也接受多个独立参数（@x, @y, @blur, @color）。
.shadow(@x, @y, @blur, @color) when (isnumber(@x)) {
box-shadow: @x @y @blur @color;
}
.shadow(@value) when (ispixel(@value)) {
box-shadow: @value @value @value/2 #000;
}
.shadow(@value) when (iscolor(@value)) {
box-shadow: 0 0 8px @value;
}
注意：when 条件只匹配一次，多个规则不会叠加；若无匹配，会报错“no matching definition”，不是静默忽略。
带命名空间的 mixin 和作用域陷阱
用 .ns { .mixin() { ... } } 定义命名空间后，调用需写成 .ns > .mixin() 或 .ns.mixin()（后者更常用）。但参数作用域容易混淆：外部变量不能自动进入 mixin 内部，除非显式传入或用 @arguments。
常见坑是以为 @bg 在父规则里定义了，mixin 里就能直接用——其实不能，必须 .mixin(@bg) 显式传参，或改用 @{bg} 字符串插值（仅限拼接属性值）。
-
@arguments是特殊变量，代表所有传入参数组成的值列表，适合透传给其他 mixin - 嵌套 mixin（即在另一个 mixin 内定义）不可见，Less 不支持闭包
- 同名 mixin 会被后定义的覆盖，没有重载机制
性能与维护提醒：避免过度抽象
带参数的 mixin 看似灵活，但滥用会导致编译慢、调试难。比如为每个边框宽度都写一个 .border-1px()、.border-2px()，不如用 .border(@w) + 统一单位约束。
真正值得抽象的是重复模式（如响应式断点、主题色切换、过渡动效组合），而不是单个属性微调。另外，CSS 自定义属性（--var）在运行时更灵活，mixin 仅适用于构建时确定的样式逻辑。
最易被忽略的一点：mixin 编译后生成的是静态 CSS，不随 JS 状态变化；如果需要动态控制，得换思路——要么用 JS 操作 class，要么用 CSS 变量 + :is()/[data-theme] 配合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
