Less的mix()函数是RGB通道加权平均计算，非Photoshop叠加模式；如mix(#ff0000,#0000ff,60%)得紫偏红均值色，不模拟multiply/overlay等非线性混合。
Less 的 mix() 函数不是 Photoshop 混合模式，别指望它叠加图层效果
Less 的 mix() 是加权平均色值计算，比如 mix(#ff0000, #0000ff, 60%) 表示 60% 红 + 40% 蓝，结果是紫偏红的均值色。它不模拟 multiply、overlay 或 screen 这类非线性混合逻辑——Less 本身不支持这些。如果你在设计系统里看到“动态卡片随背景变色”，实际靠的是 mix() 或 lighten()/darken() 做明度/饱和度调节，而非视觉混合。
用 mix() + 主题变量生成卡片底色和文字对比色
典型场景：深色背景上卡片要浅但不刺眼，浅色背景上卡片要深但保留呼吸感。关键是让卡片色与背景形成可读对比，又保持色调统一：
-
@bg-color作为全局背景变量（如#f8f9fa或#121212） - 卡片主色用
mix(@bg-color, #ffffff, 90%)（浅背景）或mix(@bg-color, #000000, 85%)（深背景） - 文字色按对比度反向推：若卡片偏亮，文字用
darken(@card-color, 30%)；若偏暗，用lighten(@card-color, 25%) - 慎用固定权重：深色背景下
mix(#121212, #ffffff, 50%)得到的是灰（#777），太浅，易导致文字对比不足；建议深色时权重调低至 15–25%
避免 contrast() 和 spin() 在卡片配色中滥用
contrast() 看似智能，但它只返回 #000 或 #fff 二选一，无法生成中间灰阶，会导致卡片在灰背景（如 #888）上突然跳成纯黑或纯白，破坏设计连贯性。spin() 则容易让卡片色偏离主色调（比如从蓝偏到青绿），尤其当背景本身已带色相时，叠加后可能发脏。真实项目中更可靠的做法是：
- 固定主色相（如品牌蓝
#2196F3），用fadeout(@primary, 10%)控制透明度模拟“混合感” - 对卡片边框用
desaturate(lighten(@bg-color, 10%), 20%)，比直接spin()更可控 - 所有颜色函数输出后，务必用浏览器 DevTools 检查 WCAG 对比度是否 ≥ 4.5:1（正文）或 ≥ 3:1（大字）
编译后 CSS 动态性有限，真“动态”需配合 JS 或 CSS 自定义属性
Less 是构建时预编译，mix(@bg-color, #fff, 80%) 只会产出一个静态色值。所谓“动态卡片”，实际有两类实现路径：
- 服务端/构建时：根据主题配置（如
theme: 'dark'）生成两套 CSS 文件，各含对应mix()结果 - 运行时：把
@bg-color替换为 CSS 自定义属性（如var(--bg-color)），再用 JS 更新document.documentElement.style.setProperty('--bg-color', ...)；此时 Less 仅负责生成基础结构，颜色计算交给color-mix()（Chrome 111+）或hwb()渐进适配 - 注意：CSS
color-mix(in srgb, var(--bg) 70%, white)行为接近 Lessmix()，但不等价——sRGB 插值 vs HSL 插值，同一参数可能差几个 hex 位
最常被忽略的一点：设计师给的“卡片随背景变灰度”的需求，本质是明度映射关系，不是色彩混合。用 luma()（PostCSS 插件）或 JS 计算背景亮度再 setStyle，比死磕 Less 颜色函数更接近真实意图。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
