纯css无法使用darken()函数，浏览器会忽略或报错；等效方案仅有hsl()+calc()（兼容性好，需严格拆解h/s/l为无单位整数并补%单位）和color-mix()（现代浏览器专用，srgb线性插值，不等价于sass的l值偏移）。
纯 CSS 里没有 darken()，写它等于白写——浏览器直接跳过或报 invalid property value。真要实现等效效果，只有两条路可走：用 hsl() + calc() 手动调 L 值（兼容性好），或用 color-mix() 混合黑色（现代浏览器专用）。别碰 filter: brightness() 或蒙层，它们不生成真实颜色值，WCAG 校验会挂。
hsl() + calc() 是目前最稳的方案，但变量格式必须严格
核心是把基础色拆成 H、S、L 三个无单位整数变量，再用 calc() 算新 L 值。常见翻车点：
-
--base-l: 60%这种带 % 的写法会导致calc(var(--base-l) - 10)报错；必须写成--base-l: 60 - H 和 S 的单位也要对上：
--base-h: 210（无单位或 deg 都行），--base-s: 80（不能写 80%） - L 值越界（ 100）时浏览器会静默 clamp，结果不可控；得用
max(0, min(100, ...))截断 -
hsl()函数里 S 和 L 参数必须带 % 单位，所以拼接时得补：比如calc(var(--base-s) * 1%)
color-mix() 更直观，但行为和 Sass 不等价
color-mix(in srgb, var(--base-color), #000 15%) 看似一步到位，但它在 sRGB 空间线性插值，不是 HSL-L 偏移，对深色“提暗”更柔和，但高饱和色容易偏灰：
- 必须显式写
in srgb，缺了部分浏览器会降级到默认色彩空间，结果偏差大 - 不等价于
darken($color, 15%)：比如darken(#ff6b6b, 15%)可能变黑红，而color-mix(... #000 15%)更接近加灰黑，色相保留稍好 - 基础色可用十六进制、
rgb()或hsl()，不用预拆解，但无法控制是“压亮度”还是“混黑” - Chrome 111+、Firefox 119+、Safari 16.4+ 才支持，IE 和旧 Edge 完全不认
千万别用 filter 或 rgba 蒙层模拟变暗
这些方法看似省事，实则破坏颜色语义：
-
filter: brightness(0.8)是渲染后滤镜，无障碍工具读不到真实色值，contrast检查直接失效 -
rgba(0,0,0,0.2)叠加在元素上，对border-color、text-shadow这类需要纯色值的属性完全无效 - 多层叠加时色偏不可控，比如浅灰背景上叠一层再叠一层，最终色值难以预测
- 它生成的不是颜色变量，只是视觉覆盖，没法传给其他 CSS 属性复用
真正麻烦的不是怎么算暗，而是算完没人帮你检查对比度——color-mix(in srgb, #1a1a1a, #000 20%) 可能产出接近 #000000 的色值，文字直接不可读。HSL 方案虽可控，但你得手动拆解原色的 H/S/L，或者用工具预处理；color-mix() 虽方便，却绕不开 sRGB 插值带来的色相偏移。选哪个，取决于你愿为兼容性让多少步，又能否接受结果不完全等价。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
