less 本身不存在 tint() 和 shade() 函数，仅支持 lighten()、darken() 等原生函数；其明暗调节基于 hsl l 通道线性偏移，非感知均匀混合，易致色相失真；真要实现设计工具级 tint/shade 效果，须用 css 运行时 color-mix(in oklch, ...) 并配合 @supports 降级。
Less 本身没有 tint() 和 shade() 函数，所谓“结果不一致”，本质是误用了其他函数（比如 lighten()/darken()）或混搭了 CSS 原生方案（如 color-mix()），导致行为逻辑错位、视觉偏差放大。
为什么 Less 里找不到 tint() 和 shade()？
Less 官方函数列表中从不存在 tint() 或 shade()。开发者常因 Sass 习惯或设计工具术语迁移而误写，编译器直接报 undefined function tint 或静默失败。这不是配置问题，是函数根本不存在。
- 别尝试
tint(#3498db, 20%)—— Less 不认识，会中断编译 - 也别指望
@import "tint.less"能补上——社区无标准实现，自行封装易踩嵌套解析坑 - 真正可用的明暗操作函数只有：
lighten()、darken()、fade()、saturate()等原生函数
lighten()/darken() 为何看起来不像 tint/shade？
lighten() 和 darken() 操作的是 HSL 的 L 分量，但它们不是“向白/黑混合”，而是单通道线性偏移。对冷色（如蓝色）、高饱和色（如品红），L 值突变会快速损失色相感，视觉上发灰、偏青或变浊，和设计稿里用 Figma 的 “Tint & Shade” 工具生成的效果明显脱节。
- 例如：
lighten(#4A90E2, 20%)得到的是苍白蓝，而非干净明亮的 tint 版本 - 深色系用
darken()易掉进低饱和+低明度区，失去“稳重感”变成“脏灰” - 解决思路不是调大百分比，而是组合修正：
lighten(saturate(@color, 8%), 10%)或darken(desaturate(@color, 5%), 12%) - 务必带
%单位：写成lighten(@c, 10)（缺%）会触发argument must be a number with unit %错误
想真做感知均匀的 tint/shade，该用 color-mix() + OKLCH
现代浏览器支持的 color-mix() 才是逼近设计工具语义的方案，但它和 Less 函数完全正交——不能在 Less 编译期计算，必须写在纯 CSS 中，并手动降级。
- 正确写法是：
color-mix(in oklch, oklch(55.2% 0.215 252.3) 70%, oklch(100% 0 0) 30%)（tint）或oklch(0% 0 0)（shade） - 不能简写为
white或black，否则报Invalid color space in color-mix() - 必须用
@supports外置降级，且 fallback 必须提前声明：--primary-light: #3a5fa8;写在@supports块外上方 - Less 变量无法注入到
color-mix()中——它不参与 Less 编译，所有 OKLCH 值需预先转好硬编码
最容易被忽略的兼容性断层
你写的 lighten(@primary, 15%) 在 Less 编译后变成确定的十六进制色，能跑在 IE9+；而 color-mix() 在 Safari 16.4+/Chrome 111+ 才可用，且无自动回退机制。两者不是“同一功能的不同写法”，是不同年代的技术栈——混用时若没分清编译时（Less）和运行时（CSS）边界，颜色就会在部分设备上彻底消失或错乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
