不能，color-mix()无法直接模拟darken($color, 10%)，因其在srgb中混合会拉垮饱和度、偏移色相；而用in lch可线性降低L值，更接近HSL亮度调整且感知均匀，但需手动换算L值并注意浏览器兼容性与透明度限制。
color-mix() 能不能直接模拟 darken($color, 10%)？
不能，color-mix() 和 Sass 的 darken() 逻辑完全不同：前者是色光混合（按指定色彩空间线性插值），后者是 HSL 色调环上降低亮度分量。直接用 color-mix(in srgb, #3498db 90%, black 10%) 看起来变暗了，但饱和度常被拉垮、色相偏移，尤其对高饱和色（如 #e74c3c）效果明显失真。
为什么用 in lch 更接近 darken 的视觉感受？
LCH 色彩空间的 L（亮度）、C（色度）、H（色调）维度彼此解耦，调整 L 值时几乎不影响 C 和 H——这和 darken() 在 HSL 中只动 L（或 Lightness）的行为更一致。Sass 的 darken() 实际操作的是 HSL 的 Lightness，而 LCH 的 L 在感知均匀性上更优，尤其对中高亮度颜色。
实操建议：
- 用
color-mix(in lch, var(--base) 90%, black 10%)替代darken($color, 10%)，比srgb空间稳定得多 - 注意：LCH 不是所有浏览器都支持（Chrome 111+、Safari 16.4+、Firefox 117+），旧版需降级 fallback
- black 在 LCH 中对应
lch(0% 0 0)，所以混合本质是线性降低 L 值，近似“提纯”暗度
如何写一个兼容且可控的 CSS 暗色生成方案？
别指望单条 color-mix() 完全复刻 Sass 函数——它没有百分比参数解析能力，也没有自动色彩空间转换。你需要手动换算“暗化 15%”为 L 值衰减量：
- 先用工具（如 Chrome DevTools 颜色拾取器）查出基础色的 LCH L 值（比如
#3498db≈lch(54.3% 52.1 254.6)） - 按比例下调 L：目标 L = 当前 L × (1 − 暗化比例)，例如 15% →
54.3% × 0.85 ≈ 46.2% - 最终写成：
color-mix(in lch, lch(46.2% 52.1 254.6) 100%, transparent 0%)（transparent 避免引入额外灰度） - 更实用的做法：定义 CSS 变量存 LCH 元组，再用
color-mix()插值，而非硬编码数值
哪些场景下 color-mix() + LCH 仍会翻车？
遇到这些情况，color-mix(in lch) 依然无法替代 darken()：
- 输入色是命名色（如
rebeccapurple）或简写十六进制（#abc），CSS 不会自动转 LCH，得先手动转或靠 JS 补全 - 需要保持 alpha 通道（如
rgba(52, 152, 219, 0.8)），color-mix()对透明度处理不直观，容易意外叠加 - 设计系统要求“统一暗化步长”，但不同基础色在 LCH 中相同 ΔL 带来的明度变化感知并不一致（尤其浅色 vs 深色），这时还是得回退到 HSL 手动计算
真正落地时，多数团队会保留 Sass 处理主题色，只在 runtime 动态色（如用户选色）场景用 color-mix(in lch) 做轻量调整——毕竟浏览器还不支持运行时解析 HSL 百分比函数。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
