Less中color()函数仅提取颜色通道值，不支持调色；真正调色需用lighten()、darken()等函数，推荐用hsl()变量统一管理色系并配合luma()实现可访问性对比度控制。
Less里color()函数根本不能直接调色
很多人以为color()是Less的调色函数，其实它只是用来从CSS颜色字符串中提取通道值（比如color(#f00)返回#ff0000），不支持亮度、饱和度调整。真要动态改颜色，得用lighten()、darken()、saturate()、desaturate()这些——它们才是Less原生的颜色操作函数。
-
lighten(@color, 10%)：把@color变亮10%，不是加白，而是HSL模式下提升L值 -
fade(@color, 70%)：控制透明度，等价于rgba()但更安全（自动处理HEX转RGBA） - 别对
hsl()字面量直接用lighten()，Less 4.0+才支持；老版本必须先赋值给变量再调用
用hsl()变量统一管理基础色系最稳妥
硬写#3498db这种十六进制值，后期换主题时得全局搜替换，极易漏。换成@primary-h: 205; @primary-s: 70%; @primary-l: 55%;，再用hsl(@primary-h, @primary-s, @primary-l)生成，所有衍生色（hover、disabled、border）都能基于这组参数推导。
- 深色模式适配只需改
@primary-l范围（比如30%→75%），不用重写整套规则 - 避免用
mix()做主色混合——它按RGB线性插值，视觉上不均匀，比如mix(#000, #fff, 50%)得到的是灰，但mix(#ff6b6b, #4ecdc4, 50%)可能偏脏 - 如果项目需兼容IE，
hsl()输出的CSS会被编译成rgb()，没问题；但fade()生成的rgba()在IE8及以下会失效
警惕contrast()在暗色背景下的误用
contrast()常被当成“自动选白或黑文字色”，但它只判断亮度（luminance），不考虑对比度是否达标。比如contrast(#2c3e50)返回#ffffff，看似合理，但WCAG要求文本与背景对比度≥4.5:1，而#2c3e50和#ffffff实际对比度只有约6.2:1——刚过线；换成#1a252f就掉到3.8:1，contrast()仍返回白，但已不合规。
- 真正需要可访问性保障时，别信
contrast()，用lighten(@color, 40%)或darken(@color, 30%)手动控制明度差 - 可以封装一个
.text-contrast(@bg)mixin，内部用luma()算亮度值再分支判断，比裸用contrast()可靠 -
luma(@color)返回0–1之间的数值，比contrast()更底层，适合做条件逻辑
主题切换别靠@import多文件，用function + variable组合更灵活
为浅色/深色主题建两套variables.less然后@import切换？维护成本高，且无法运行时响应。更好的做法是定义一个@theme: light;变量，配合自定义函数或嵌套mixin生成对应值。
立即学习“前端免费学习笔记（深入）”；
- 例如：
@primary: if(@theme = dark, hsl(205, 70%, 30%), hsl(205, 70%, 55%)); - Less 4.0+支持
is-light()、is-dark()判断函数，可配合@theme做条件分支 - 注意：Less不支持运行时重定义变量，所以
@theme必须在编译前确定（通过构建工具传参或顶层define），不能靠JS切换
