color-mix()无法动态变色，因其仅在CSS解析时生成静态颜色；真要实现评分驱动颜色，必须用JS读取data-score、计算并写入CSS变量，再由CSS消费。
不能直接根据评分动态计算进度条颜色——color-mix() 不接受变量、不响应状态变化、不支持运行时计算，它只在 CSS 解析阶段生成一个静态颜色值。
为什么写了 color-mix() 却没按评分变色？
常见失效不是写错语法，而是误以为它能“读取”数值：
-
color-mix(in srgb, green 80%, red 20%)中的80%和20%是固定权重，不是从 HTMLdata-score="85"里读出来的 - 用
var(--score)替换权重（如green calc(var(--score) * 1%)）会报Invalid property value——color-mix()不支持任何表达式或变量 - 试图在
:nth-child(1)或[data-score="90"]选择器里嵌套调用，结果仍是静默忽略或 fallback 到上一个有效颜色
color-mix() 在进度条中唯一可行的用法
只能用于预设几档离散评分区间，靠人工算好每档对应的颜色值，再用属性层叠 + 属性选择器硬编码：
- 先手动算出：评分 0–49 →
color-mix(in srgb, #ef4444 70%, #f97316 30%)=#e55d4c；50–79 →#f59e0b；80–100 →#10b981 - 在 CSS 中写死：
[data-score~="low"] { background-color: #e55d4c; }、[data-score~="mid"] { background-color: #f59e0b; } - 必须提供 fallback：
background-color: #ef4444;放在color-mix()前面，否则不支持的浏览器会渲染为透明或继承色 - 别用
in lch或in oklch—— Safari 16.4+ 才支持，且对进度条这种强调对比的场景，in srgb的明度落差更直观
真要实现“评分驱动颜色”，必须用 JS
浏览器不提供 CSS 原生方案，JS 是唯一可靠路径：
立即学习“前端免费学习笔记（深入）”；
- 监听数据变更或 DOM 加载后，读取
data-score值 - 用 JS 计算混合比例（如
score / 100），再调用color-mix()等效逻辑（比如插值 RGB 或 OKLCH） - 把结果写入
style或 CSS 变量：el.style.setProperty('--progress-color', '#10b981') - CSS 中仅负责消费：
background-color: var(--progress-color, #3b82f6); - 注意 OKLCH 插值需检查环境：
matchMedia('(color-gamut: p3)').matches配合@supports (color: oklch(0 0 0))
最容易被忽略的是：你写的每一个 color-mix() 都是编译期常量，和 calc(1px + 1px) 一样不可变。想让它“动”，就得承认它本质是个静态函数 —— 而不是把它当成 JS 的 mixColors()。
