CSS中无darken函数，但可通过HSL的L值用calc()动态调节实现等效效果；需统一用无单位整数存H/S/L，用max/min截断越界值，并手动补%单位。
darken函数在纯CSS里不存在，但HSL模式天然支持亮度调节
Sass的darken($color, 10%)本质是降低HSL色彩模型中的L（Lightness）值，而现代CSS支持hsl()函数和自定义属性，完全可以用calc()动态计算L值实现等效效果。关键不是“模拟函数”，而是理解L值范围是0–100，且必须为无单位数字。
用CSS变量+calc调整HSL的L值要避开三个硬坑
直接写hsl(var(--h), var(--s), calc(var(--l) - 10))看似合理，但实际会失败：
-
calc()不能对带百分号的值做算术运算——如果--l存的是60%，calc(60% - 10)非法；必须统一用无单位整数（如60）存L值 - HSL的L值不能越界：结果低于
0或高于100会导致浏览器静默失效或渲染异常，需手动截断（CSS目前无clamp()以外的条件逻辑，得靠开发者预估范围） - 色相（H）和饱和度（S）若也用变量，它们的单位必须明确：
--h用deg或无单位整数（如210），--s必须是无单位数（80而非80%），否则hsl()解析失败
一个可复用的darken式CSS变量方案
把基础色拆成H/S/L三变量，再定义“变暗步长”变量，用calc()生成新L值：
body {
--base-h: 210;
--base-s: 80;
--base-l: 60;
--darken-step: 15;
<p>--dark-l: max(0, min(100, calc(var(--base-l) - var(--darken-step))));
--dark-color: hsl(var(--base-h), calc(var(--base-s) * 1%), var(--dark-l));
}</p>
注意两点：
-
max(0, min(100, ...))是CSS目前最稳妥的截断写法（clamp()虽可用，但IE/旧Safari不支持） -
--base-s存的是80，但hsl()要求饱和度带%单位，所以得用calc(var(--base-s) * 1%)补单位——乘1%比拼字符串更可靠 - 若要链式调用（比如darken两次），需定义中间变量，CSS不支持嵌套
calc()内再套var()求值
对比Sass darken：精度、性能与维护成本的真实差异
纯CSS方案输出的是静态计算值，和Sass编译时生成的固定十六进制色一样，运行时无性能损耗。但区别在于：
- 无法像Sass那样传入任意颜色（如
#3498db）自动转HSL再处理——你得手动拆解原色的H/S/L，或借助工具预处理 - 不支持相对颜色语法（如
color-mix(in lch, black 30%, var(--base))），后者是未来标准，但Chrome 111+才开始支持，兼容性远不如HSL+calc - 当主题色频繁变更时，维护三组H/S/L变量比维护一个HEX变量更容易出错，建议用构建工具（如PostCSS插件）在编译期注入
真正容易被忽略的是：HSL的L值感知是非线性的，减10在浅色区效果微弱，在中灰色区变化明显——这和Sass的darken行为一致，但别误以为“减相同数值=视觉等量变暗”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
