如何修改CSS自定义属性中HSL颜色的alpha通道？

你的问题出在自定义属性的值是完整的hsl()函数字符串，而hsla()需要的是色相、饱和度、亮度三个独立参数，直接传入整个字符串会导致参数格式错误，浏览器无法解析，所以计算后得到none。

下面是两种原生CSS解决方案，无需依赖SASS：

方案1：拆分HSL分量为单独变量（兼容性最好） #

把颜色的色相、饱和度、亮度拆成三个独立的自定义属性，这样就能直接用hsla()或hsl()（现代CSS中hsl()支持第四个alpha参数）组合出带透明度的颜色：

:root {
  --color-h: 25;
  --color-s: 33%;
  --color-l: 93%;
}

.test {
  /* 用hsla组合 */
  box-shadow: 0 2px 4px hsla(var(--color-h), var(--color-s), var(--color-l), 0.5);
  /* 或直接用hsl，效果完全一致 */
  box-shadow: 0 2px 4px hsl(var(--color-h), var(--color-s), var(--color-l), 0.5);
}

这个方案支持所有支持CSS自定义属性的浏览器，没有版本限制。

方案2：使用color-mix()函数（无需修改原有变量） #

如果不想改动已有的--color变量定义，可以利用现代CSS的color-mix()函数，通过混合原颜色和透明色来调整透明度：

:root {
  --color: hsl(25, 33%, 93%);
}

.test {
  /* 第二个参数的百分比控制透明度，50%对应alpha=0.5 */
  box-shadow: 0 2px 4px color-mix(in srgb, var(--color), transparent 50%);
  /* 更简洁的写法：直接在颜色后加 / alpha 值 */
  box-shadow: 0 2px 4px color-mix(in srgb, var(--color), #0000 / 0.5);
}

注意：color-mix()需要Chrome 111+、Firefox 113+版本支持，你的Chrome 112可以正常使用，但Firefox 112暂不兼容，若要覆盖旧版Firefox，优先选择方案1。

内容的提问来源于stack exchange，提问作者Ferit