less 不支持 color-mix()，因其为编译时预处理器，而 color-mix() 是浏览器运行时功能；应由 less 生成基础色变量，css 负责 runtime 混合。
Less 本身不支持 color-mix()，也没有原生插件机制能直接接入 CSS 的 color-mix() 函数——它在编译期运行，而 color-mix() 是浏览器运行时才解析的 CSS 功能。 想用 color-mix() 必须放弃 Less 编译时颜色计算，改用纯 CSS 自定义属性 + color-mix(in srgb, ...) 声明，或用 JS 注入。Less 能做的，是用 mix()、spin()、lighten() 等函数生成静态色值，再导出为 CSS 变量供后续使用。
Less 的 mix() 和 CSS 的 color-mix() 根本不是一回事
很多人搜“Less color-mix”是想复刻 CSS 新特性，但必须认清：Less 的 mix(@c1, @c2, 50%) 在编译时就输出一个确定的十六进制（比如 #7d8cb5），而 CSS 的 color-mix(in srgb, #3498db 70%, #1e40af 30%) 是浏览器实时计算的，支持变量、媒体查询响应、甚至动画。两者定位完全不同：
- Less
mix()：适合构建时固定色板，输出不可变值，兼容所有浏览器 - CSS
color-mix()：适合 runtime 主题切换、深色模式平滑过渡、按钮悬停渐变等动态场景，但 Safari 当前不支持in lch，in srgb是唯一稳妥选项 - 混用风险：把 Less
mix()输出的值再塞进 CSScolor-mix()里（如color-mix(in srgb, var(--primary), #fff)）完全可行，但别指望 Less 能“编译出”color-mix()表达式——它不认识这个语法，会报错Operation on an invalid type
用 Less 生成可被 CSS color-mix() 消费的变量
真正实用的做法，是让 Less 负责“算好基础色”，CSS 负责“运行时混合”。例如：
@primary: #3498db;
@surface: #ffffff;
:root {
--primary: @primary;
--surface: @surface;
--primary-hover: color-mix(in srgb, var(--primary) 80%, var(--surface) 20%);
--primary-pressed: color-mix(in srgb, var(--primary) 60%, black 40%);
}
注意三点：
- Less 只负责把
@primary和@surface编译成字符串赋给--primary和--surface，不碰color-mix() -
color-mix()中不能写var(--primary) 80%, #fff 20%这种混搭——权重必须显式写全，否则 Safari 解析失败 - 如果需要 fallback，得手动加
color: #2980b9;在前，color: color-mix(...);在后，CSS 会忽略不支持的声明
为什么别信“Less color-mix 插件”
搜索结果里所谓 “Less color-mix plugin”，基本是以下三类：
- 伪造函数名的自定义 mixin（如
.color-mix(@a, @b) { color: mix(@a, @b); }），本质还是调用原生mix()，和 CSScolor-mix()无关 - Node.js 层写的 PostCSS 插件，它根本不是 Less 插件，而是接管了整个构建流程，在 Less 编译完之后再扫描 CSS 文件做替换——这已脱离 Less 范畴
- 用 JS 在浏览器里读取 Less 编译后的 CSS 变量，再用
color-mix()逻辑重写样式——性能差、无法 SSR、破坏 CSSOM
这些方案要么伪需求，要么绕远路。Less 的定位就是静态预处理器，强行让它模拟 runtime 行为，只会增加调试成本和兼容性陷阱。
真正要动态主题，Less 只能做一半
如果你的项目需要深色模式开关、用户选色、或设计系统级主题引擎，Less 最多做到：
- 用
@theme: dark;+if()分支输出不同色值组 - 用
hsl(@h, @s, if(@theme = dark, 30%, 60%))控制明度 - 把所有衍生色（hover/active/disabled）封装成变量，确保修改
@primary-h就全局联动
但所有这些，最终都得靠 JS 或媒体查询驱动 CSS 变量切换——Less 编译一次就完了，它不监听 prefers-color-scheme，也不响应 localStorage 变化。把动态逻辑压给 Less，等于把 runtime 问题硬塞进 build time，后面踩坑的一定是你自己。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
