Less Mixin 不返回值，而是展开注入CSS声明；不可赋值或动态生成属性，需用CSS自定义属性导出多值；多参数须显式解构、严格匹配；复杂场景应分层拆分为职责单一的mixin。
Less Mixin 本身不返回值，但能批量输出多个CSS属性
Less 的 .mixin() 没有 return 机制，所谓“返回多个属性”，本质是它在调用位置**展开并注入一组声明**。只要 mixin 内部写了 color: red; font-size: 14px;，调用处就会原样插入这两行——不是返回，是复制粘贴式展开。
常见误解是把它当函数用，比如期望 @result: .btn-styles(#007bff); 赋值，这会直接报错：ParseError: Expected ')' got ':'。Less 不允许把 mixin 当表达式参与赋值或计算。
- 所有属性必须显式写在 mixin 主体里，不能靠条件分支“动态生成”再统一输出（除非用
when守卫 + 多重定义） - 如果 mixin 内含嵌套选择器（如
&:hover），这些规则也会一并展开到调用点的父级上下文中 - 避免在 mixin 中写
@import或@charset，它们不会按预期作用于调用位置
想“导出”多组值？得靠 CSS 自定义属性 + 命名空间前缀
当需要让一个 mixin 同时提供颜色、边框、阴影三类配置，并在不同地方分别提取，@variables 不行（作用域隔离），@arguments 也不行（类型不匹配）。唯一可行路径是：用多个带命名前缀的 CSS 变量，例如 --btn-color、--btn-border、--btn-shadow。
示例：
立即学习“前端免费学习笔记（深入）”；
.btn-config(@color, @border, @shadow) {
--btn-color: @color;
--btn-border: @border;
--btn-shadow: @shadow;
}
调用后，在任意子元素中可分别使用：color: var(--btn-color);、box-shadow: var(--btn-shadow);。注意两点：
- 变量名必须以
--开头，否则无法被var()提取 - 不要用
@btn-color这类 Less 变量替代，它编译时就被替换成字面值，无法跨作用域复用 - 若需支持主题切换，可把这套变量定义在
:root下，配合媒体查询或 class 切换
多个参数 mixin 容易踩的坑：逗号是分隔符，不是连接符
写 .shadow(0, 2px, 4px, rgba(0,0,0,0.15)) 看似自然，但内部若误用 @arguments 直接塞进 box-shadow，结果会是 box-shadow: 0, 2px, 4px, rgba(0,0,0,0.15); —— 浏览器直接忽略，因为 box-shadow 要空格分隔，不是逗号。
正确做法始终是显式解构：
.shadow(@x, @y, @blur, @spread, @color) {
box-shadow: @x @y @blur @spread @color;
}
- 参数个数必须严格匹配，少传或多传都会触发
Mixin is not defined - 默认值只能放在末尾，
.shadow(@x: 0, @y, @blur)是非法语法 - 想跳过中间参数？只能显式传
~""或占位值，比如.shadow(0, ~"", 4px, ~"", rgba(0,0,0,0.1))
真正要复用多维样式，别只靠 mixin 展开
当一个组件需要同时控制配色、尺寸、动效、响应断点，硬塞进一个 mixin 会导致参数膨胀、调用混乱、调试困难。这时候更合理的分层是：
- 用
.btn-base()封装基础结构（display、padding、border-radius） - 用
.btn-theme(@color)单独处理颜色体系（包括 --btn-bg、--btn-text、--btn-hover） - 用
.btn-size(@scale: 1)控制缩放比例，内部通过em或clamp()计算 - 最终组合：
.btn { .btn-base(); .btn-theme(#007bff); .btn-size(1.2); }
这种拆法让每个 mixin 职责单一，参数清晰，也方便未来抽离成独立模块。强行塞进一个“全能 mixin”，最后只会变成没人敢改的祖传代码。
