CSS中如何在hsla函数内使用已定义的hsl类型CSS变量？

有两种可行的实现方式，可根据兼容性需求选择：

方案1：使用CSS相对颜色语法（写法简洁，适合现代浏览器） #

Chrome 119+、Firefox 121+、Safari 16.4+ 均已支持该语法，你不需要拆分原有变量，只需要在hsl函数中添加from关键字，提取已有颜色的三个参数后追加透明度即可：

--white-2: hsl(from var(--white-1) h s l / 50%);

注：你原本的写法hsla(var(--white-1) 50%)无法直接生效，因为var(--white-1)返回的是完整的hsl颜色值，无法直接作为hsla的参数拼接。

方案2：拆分HSL参数变量（兼容性最优，适配所有支持CSS变量的浏览器） #

如果需要兼容旧版本浏览器，可以提前把hsl的三个参数拆分为独立变量，再按需组合生成不同透明度的颜色：

/* 提前定义基础参数 */
--white-h: 0deg;
--white-s: 0%;
--white-l: 100%;

/* 组合生成不同透明度的白色变量 */
--white-1: hsl(var(--white-h) var(--white-s) var(--white-l));
--white-2: hsla(var(--white-h) var(--white-s) var(--white-l) / 50%);

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