Less函数是编译时静态计算的内置工具，非JavaScript运行时函数，用于安全生成CSS值，不支持条件或循环，需严格遵循参数规范。
Less 的函数不是 JavaScript 那种可自定义逻辑的函数，而是编译时求值的内置计算工具——你不能用它做运行时响应式变化，但能安全、清晰地生成 CSS 值。
less 函数本质是编译期静态计算，不是运行时 JS 函数
Less 所有函数（如 lighten()、round()、percentage()）都在 CSS 编译阶段执行，输出纯 CSS 字符串。它们不参与浏览器渲染流程，也不支持条件分支或循环。
- 错误认知：以为
fade(@color, 0.3)能随用户交互动态变透明度 → 实际只生成一个固定rgba(...) - 正确用途：统一管理颜色阶梯、响应式断点比例、字体缩放系数等“设计系统内可预知的变换”
- 性能影响：零 runtime 开销，但过度嵌套（如
lighten(darken(saturate(@base, 10%), 5%), 2%)）会让调试困难
常用颜色函数必须配单位或明确色彩空间
像 lighten()、spin() 这类函数默认操作 HSL 空间，但输入颜色若没明确格式（如十六进制或 rgb()），结果可能反直觉。
-
lighten(#ff6b6b, 10%)✅ 正常提亮 -
lighten(rgb(255, 107, 107), 10%)✅ 同上，但更易读 -
lighten(255, 107, 107, 10%)❌ 报错：Less 不接受裸数字三元组，必须包在rgb()或hsl()里 - 注意：
desaturate()对灰度色无效，spin()对无饱和度颜色（如#ccc）也无视觉变化
数值函数要小心单位隐式转换
Less 会自动合并同类单位（如 10px + 2em 报错），但某些函数会“吃掉”单位导致意外结果。
立即学习“前端免费学习笔记（深入）”；
-
round(12.345px)→ 输出12px（保留单位）✅ -
percentage(0.34)→ 输出34%（自动加 %）✅ -
floor(10px / 3px)→ 输出3（单位被约去，只剩纯数字）⚠️ 若后续拼接成width: floor(...)px就得手动补px -
unit(12px, em)强制转换单位，但仅当原始值可换算（如12px→0.75em前提是 base font-size=16px）
自定义函数只能靠 JavaScript 插件，普通 Less 文件写不了
Less 官方不支持用户在 .less 文件里写 function myFn($x) { ... }。所谓“自定义函数”，实际只有两种可行路径：
- 用
plugin方式注册 JS 函数（需 Node.js 环境 +less.render()调用时传入），例如实现clamp()或时间戳生成器 - 用
mixins模拟函数行为：.calc-width(@ratio) { width: round(100% * @ratio); }，调用时.calc-width(0.618); - 混淆点：mixin 不是函数——它不返回值，只是插入代码块；无法赋值给变量，也不能嵌套在表达式中
真正容易被忽略的是：所有 Less 函数的参数类型和顺序必须严格匹配文档，少一个括号、多一个空格、单位位置错位，都会让整个文件编译失败且错误提示极简陋（比如只报 ParseError: Unexpected input）。建议把常用函数写成 snippet，避免手敲出错。
