如何利用CSS变量实现类似Sass的darken和lighten功能_操作HSL百分比-css教程-PHP中文网

纯 css 变量无法直接调用 sass 的 darken()/lighten()，因二者分属运行时与编译时；可靠方案是 hsl()+calc() 手动调整亮度值，或现代浏览器用 color-mix() 混合，js 则可实现精确色彩空间转换。

如何利用css变量实现类似sass的darken和lighten功能_操作hsl百分比

纯 CSS 变量里没法直接调用 darken() 或 lighten()，因为这些是 Sass 编译期函数，而 CSS 变量在运行时才生效——两者根本不在一个执行阶段。你写 darken(var(--color), 10%)，浏览器会直接报错或忽略，连语法校验都过不去。

用 `hsl()` + `calc()` 手动模拟亮度偏移

这是目前最可靠、兼容性最好的纯 CSS 方案，核心是把颜色预先拆成 HSL 分量，再用 calc() 调整 l（亮度）值：

必须用 hsl() 格式定义基础色，不能用 hex 或 rgb()，否则无法提取 hsl 值

把 h 和 s 抽成独立 CSS 变量，l 单独设为可计算变量，例如：

:root {
  --color-h: 200;
  --color-s: 70%;
  --color-l: 50%;
  --color-primary: hsl(var(--color-h), var(--color-s), var(--color-l));
  --color-primary-darker: hsl(var(--color-h), var(--color-s), calc(var(--color-l) - 10%));
  --color-primary-lighter: hsl(var(--color-h), var(--color-s), calc(var(--color-l) + 10%));
}

calc() 中的百分比单位必须和原始 l 值单位一致（即带 %），否则无效；l 超出 0–100% 时浏览器会自动 clamp，但结果不可控（比如 calc(5% - 10%) → -5% → 实际取 0%，颜色发灰）

用 `color-mix()` 做线性混合（现代浏览器专用）

color-mix() 是 CSS Color Level 4 的新特性，不依赖 HSL 拆解，直接按比例混合颜色，语义更接近“加黑/加白”，但行为与 Sass 的 darken() 不同：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

它在 srgb 空间做线性插值，不是 HSL 亮度通道调整，对深色提暗效果更柔和，不易突变发黑

写法简洁：

:root {
  --color-primary: #3498db;
  --color-primary-darker: color-mix(in srgb, var(--color-primary), #000 15%);
  --color-primary-lighter: color-mix(in srgb, var(--color-primary), #fff 20%);
}

目前仅 Chromium 111+、Firefox 119+、Safari 16.4+ 支持；旧版浏览器会回退到 fallback 颜色（需配合 @supports 或 JS 检测）
注意：混合比例是“目标色占比”，color-mix(in srgb, #333, #000 20%) 表示 80% #333 + 20% #000，不是“变暗 20%”

为什么不能用 `filter: brightness()` 替代

brightness() 是作用于渲染结果的后期滤镜，它不改变颜色本身的语义值，会导致一系列连锁问题：

文字阴影、border-color、box-shadow 等继承自原色的属性不会被滤镜影响，造成视觉不一致
透明度叠加异常：对 rgba(0,0,0,0.5) 应用 brightness(0.8)，实际是先合成再压暗，不是真正调低 RGB 值
无法用于伪元素生成内容（如 ::before { content: "●"; color: var(--color); }），滤镜不作用于 content 文本颜色
和 contrast()grayscale() 等滤镜叠加时顺序敏感，调试成本高