能否在CSS自定义属性定义中使用带回退的自定义属性作为值的一部分

问题原因 #

你这种写法失效的核心是CSS自定义属性的计算规则：当你在:root作用域下定义包含var(--opacity, 1)的hsla颜色时，浏览器会在定义阶段就完成hsla函数的解析计算。此时:root下并没有定义--opacity变量，所以会直接使用回退值1，最终--clr-900等属性会被计算为固定的不透明颜色值，和--opacity变量的关联直接断开，后续局部修改--opacity自然不会生效。

解决方案 #

方案1：拆分颜色通道（兼容性最好，适配所有支持CSS变量的浏览器） #

不要提前把透明度参数封装进颜色变量，只存储HSL三个通道的数值，使用时再按需组合hsl/hsla函数：

:root {
  /* 仅存储色相、饱和度、亮度三个通道 */
  --clr-900: 36 83% 0%;
  --clr-700: 36 83% 30%;
  --clr-300: 36 83% 70%;
  --clr-200: 36 83% 85%;
  --clr-100: 36 83% 100%;
}

使用方式如下：

.test1 {
  /* 直接使用默认透明度1 */
  background-color: hsl(var(--clr-900));
}

.test2 {
  /* 自定义透明度直接传入hsla即可 */
  background-color: hsla(var(--clr-900), 0.65);
}

方案2：使用CSS相对颜色语法（适配现代浏览器，保留原有使用习惯） #

如果要保留你原有的「通过局部设置--opacity修改透明度」的使用逻辑，可以用现代浏览器支持的CSS相对颜色语法实现：

:root {
  /* 先定义基础纯色 */
  --clr-900-base: hsl(36, 83%, 0%);
  --clr-700-base: hsl(36, 83%, 30%);
  --clr-300-base: hsl(36, 83%, 70%);
  --clr-200-base: hsl(36, 83%, 85%);
  --clr-100-base: hsl(36, 83%, 100%);

  /* 用相对颜色语法绑定透明度变量 */
  --clr-900: hsl(from var(--clr-900-base) h s l / var(--opacity, 1));
  --clr-700: hsl(from var(--clr-700-base) h s l / var(--opacity, 1));
  --clr-300: hsl(from var(--clr-300-base) h s l / var(--opacity, 1));
  --clr-200: hsl(from var(--clr-200-base) h s l / var(--opacity, 1));
  --clr-100: hsl(from var(--clr-100-base) h s l / var(--opacity, 1));
}

这种写法下你原来的使用代码可以直接正常运行：

.test1 {
  background-color: var(--clr-900);
}

.test2 {
  --opacity: 0.65;
  background-color: var(--clr-900);
}

注：相对颜色语法支持版本为Chrome 111+、Firefox 112+、Safari 16.4+，如果需要兼容更低版本浏览器请使用方案1。

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