Less不支持函数返回值，需用带参Mixin结合CSS自定义属性模拟；如.calc-hsl-lighten封装HSL亮度调整并用--result存储，配合clamp防超限；多值返回应分命名变量；避免循环中调用复杂Mixin以防编译性能骤降。
Less 本身不支持函数返回值，但可以用带参数的 Mixin + CSS 自定义属性“骗过”编译器
Less 没有 function 关键字，return 更是不存在——所有“计算”必须在编译期展开。想实现类似 Sass 的 lighten($color, 10%) 这种可复用、可嵌套的逻辑，唯一可行路径是：用 Mixin 封装计算过程，再把结果赋给一个临时 CSS 变量，最后在需要处 var(--result) 提取。
用 .calc-hsl-lighten Mixin 模拟 lighten()，避免硬编码 HSL 转换
直接写 hsl(...) 值容易出错，且无法动态调整亮度。正确做法是把颜色转 HSL 的逻辑收进 Mixin，用 @h、@s、@l 解构，再叠加偏移：
.calc-hsl-lighten(@color, @delta) {
@hsl: hsl(hue(@color), saturation(@color), lightness(@color));
@h: hue(@hsl);
@s: saturation(@hsl);
@l: clamp(0%, 100%, lightness(@hsl) + @delta);
--result: hsl(@h, @s, @l);
}
调用时写：.calc-hsl-lighten(#3498db, 15%); color: var(--result);。注意两点：一是 clamp() 防止亮度超限；二是必须用 --result，不能用 @result（Less 变量无法跨作用域传递到 CSS 属性值中）。
多个返回值？用多个 CSS 变量 + 命名空间前缀避免冲突
如果 Mixin 需同时输出颜色、阴影、字号三组值，别试图塞进一个变量。按用途拆开，加前缀防覆盖：
--color-primary-light--shadow-card-sm--font-size-body
对应 Mixin 内部写成：--color-primary-light: hsl(...); --shadow-card-sm: 0 1px 3px rgba(...);。这样后续样式里可以自由组合，也方便被 JS 读取。
性能和兼容性陷阱：不要在循环里反复调用带计算的 Mixin
Less 的 .for() 循环本质是语法糖，每次迭代都会完整展开 Mixin 内容。若 Mixin 包含多层 hsl()、contrast() 计算，编译速度会指数级下降，生成 CSS 体积也会暴增。真实项目中应：
- 把高频计算结果提前固化为常量（如
@brand-blue-200: #5dade2;） - 仅对真正需要动态调整的场景才用 Mixin + CSS 变量方案
- 禁用
math: strict模式（Less 4.0+ 默认开启），否则lightness(#fff) + 10%会报错，必须显式写成lightness(#fff) + (10%)
最易被忽略的是：CSS 变量在伪类、媒体查询中无法被 Less 编译器感知，所以 :hover { color: var(--result); } 看似能用，但如果你期望它响应 @media (prefers-color-scheme: dark) 切换，就得靠 JS 或原生 CSS color-scheme 配合，Less 无能为力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
