color()函数不能用于主题切换，因为它仅解析颜色字面量为十六进制值，不支持亮度/饱和度调节、链式调色或响应主题变化，与lighten()、darken()等真正可派生色彩的函数有本质区别。
color() 函数在 Less 中根本不能优化主题切换——它不调色，只提取颜色字面量的通道值，对主题系统毫无帮助。
为什么 color() 不能用于主题切换
color() 的作用非常局限：它只是把字符串（如 "#f00" 或 "red"）解析成标准十六进制色值（#ff0000），不做任何亮度、饱和度或透明度调整。它既不接受百分比参数，也不参与衍生色计算，更不会响应主题变化。
- 写
@c: color("#3498db");和直接写@c: #3498db;效果完全一样 - 它无法配合
lighten()、darken()等函数做链式调色（因为返回的是静态值，不是可操作的色彩模型） - 所有基于
color()的“动态”假设，都源于对函数名的误读——它和 CSS 的color-mix()或 HSL 调节毫无关系
真正有用的 Less 颜色函数有哪些
主题切换依赖的是可预测、可复用、可批量派生的颜色操作能力，lighten()、darken()、saturate()、fade() 和 hsl() 才是主力。
-
lighten(@primary, 15%)：安全提升亮度，比硬写#5aace2更易维护 -
fade(@primary, 80%)：生成带透明度的版本，比手动转rgba()更可靠（自动处理 HEX → RGBA） -
hsl(@hue, @saturation, @lightness)：统一管理色系，改@lightness就能适配深色模式，避免整套重定义 - 慎用
mix()：RGB 插值视觉不均匀，深色背景下容易产生灰浊感
如何让 Less 颜色函数真正服务于主题切换
关键不是函数本身多强大，而是它们怎么嵌入构建流程和运行时体系中。
- 所有调色函数必须作用于顶层变量（如
@primary），不能嵌套在选择器内部——否则无法被modifyVars覆盖 - 不要用
@hover-color: lighten(@primary, 10%)这类“派生变量”；直接在样式里写background: lighten(@primary, 10%)，确保构建时重新计算 - 深色模式变量应独立声明（如
@primary-dark: hsl(205, 70%, 30%)），而非靠 JS 运行时传参给 Less——Less 不接收运行时输入 - 如果最终要走 CSS 变量方案，
:root { --primary: @primary; }中的@primary必须是纯变量，不能是lighten(color("#007bff"), 5%)这种冗余包裹
最容易被忽略的一点：Less 颜色函数只在编译期起作用，而主题切换的“动态性”永远来自 CSS 变量 + JS + class 切换三者配合。lighten() 再灵活，也变不出浏览器里实时响应的过渡动画——那得靠 transition: background-color 和 var(--bg-color) 共同完成。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
