multiply()将两颜色RGB通道值相乘再除以255，结果更暗且忽略alpha；overlay()依基底色通道是否＞128分别执行screen或multiply，输出由基底明暗决定。
multiply() 函数的实际效果与常见误用
multiply() 会把两个颜色各自 RGB 通道值相乘再除以 255，结果总是比原色更暗。比如 multiply(#ff6600, #0000ff) 得到 #000000，因为红色通道 255 × 0 = 0、绿色通道 102 × 0 = 0、蓝色通道 0 × 255 = 0。
容易踩的坑：
- 传入十六进制简写（如
#f60）时，Less 会自动展开为#ff6600，但若混用 HSL/RGBA 值，需确认是否已转为标准格式，否则编译报错ArgumentError: multiply() expects color values - 不支持 alpha 通道参与运算 ——
multiply(rgba(255,102,0,0.8), #0000ff)会被忽略透明度，只按rgb(255,102,0)计算 - 顺序敏感：第一个参数是“基底”，第二个是“叠加层”，
multiply(#0000ff, #ff6600)和上面结果一致，但语义上建议把主色放前面
overlay() 的行为逻辑与亮度依赖关系
overlay() 不是简单平均或线性混合，它内部判断第一个颜色每个通道是否大于 128：大于则走 screen()（提亮），否则走 multiply()（压暗）。所以输出完全由 color1 的明暗分布决定。
典型现象：
立即学习“前端免费学习笔记（深入）”；
-
overlay(#ff6600, #0000ff)→#ff0000：橙色基底中红色通道最亮（255），触发 screen 效果；蓝绿通道较暗，触发 multiply，最终红强蓝绿弱 -
overlay(#333333, #ff6600)→ 比原灰更深：深灰所有通道都 - 纯白
#ffffff或纯黑#000000作为color1时，结果分别恒等于color2或#000000，这点和softlight()不同
multiply 与 overlay 在 UI 主题中的搭配策略
两者不是替代关系，而是控制粒度不同：multiply 适合做确定性压暗（如按钮悬停态统一降饱和），overlay 更适合模拟图层叠加感（如卡片阴影色随主色调自适应）。
实操建议：
- 想让浅色背景上的文字图标自动变深？用
overlay(@bg, #000000)，比硬写darken(@bg, 20%)更符合视觉层级直觉 - 构建深色模式时，避免对所有颜色无差别
multiply(@base, #000000)—— 它会让高饱和色崩成黑块，改用overlay(@base, #111)更可控 - 注意编译后 CSS 不含函数调用，全是静态色值，所以无法在运行时动态切换；需要 JS 动态换肤时，得提前生成多套变量或改用 CSS 自定义属性 + HSL 调整
调试时如何快速验证混合结果
别靠肉眼猜，直接在 Less 文件里加临时规则输出中间值：
body {
--debug-multiply: <code>multiply(#ff6600, #0000ff)</code>;
--debug-overlay: <code>overlay(#ff6600, #0000ff)</code>;
}
然后用浏览器开发者工具看计算后的 style 面板，确认是否为预期色值。更进一步，可配合 luma() 检查亮度一致性：luma(overlay(#ff6600, #0000ff)) 应明显高于 luma(multiply(#ff6600, #0000ff))。
最容易被忽略的一点：Less 所有颜色函数都在编译期求值，不感知 DOM 状态或媒体查询。如果你期望“在暗色模式下自动切 overlay 逻辑”，必须手动拆成两套变量，或者放弃 Less 函数、改用现代 CSS 的 color-mix()（但目前兼容性有限）。
