如何拼接CSS变量为十六进制颜色添加透明度？

问题描述 #

在CSS中，我们可以用8位十六进制代码表示颜色加透明度，比如 #b71c1c64 就是 #b71c1c（红色）加上透明度值 64。我已经把网站所有颜色定义成了CSS变量：

:root {
  --color-red-50: #ffebee;
  // ... 省略其他颜色变量
  --color-red-900: #b71c1c;
}

有些场景下需要用 rgba() 函数，比如设置阴影：

input {
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
}

因为没法直接在 rgba() 里用十六进制变量，我想把颜色变量和透明度变量拼接起来，比如这样：

:host {
  --opacity-0: 0;
  // ... 省略其他透明度变量
  --opacity-100: 64;
}

input {
  box-shadow: inset 
    0 1px 1px 
      var(--color-blue-400) + var(--opacity-75),
    0 0 8px
      var(--color-blue-400) + var(--opacity-60);
}

我试了几种写法都没成功：

foo {
  prop: var(--color-blue-400)var(--opacity-75);
  prop: var(--color-blue-400) + var(--opacity-75);
  prop: var(--color-blue-400) & var(--opacity-75);
  prop: calc(ar(--color-blue-400) + var(--opacity-75));
  prop: calc(ar(--color-blue-400) & var(--opacity-75));
  prop: calc(ar(--color-blue-400), var(--opacity-75));

  prop: color-mix(in srgb, var(--color-blue-400) 75%, rgba(0,0,0,0))
}

请问这种直接拼接CSS变量的方式可行吗？

解答 #

直接拼接CSS变量的方式不可行 #

你尝试的几种写法都不符合CSS语法规则：

• CSS变量不能直接连写或用+/&这类运算符拼接字符串，CSS本身不支持这种字符串拼接逻辑。
• calc()函数仅用于数值计算，无法处理颜色字符串或执行字符串拼接操作。
• 最后使用的color-mix写法逻辑有误，color-mix的作用是混合两种颜色，并非直接设置单一颜色的透明度。

可行的替代方案 #

1. 提前定义带透明度的颜色变量

最直观且兼容性最好的方式，是预定义包含透明度的8位十六进制变量：

:root {
  --color-blue-400: #66afe9;
  --color-blue-400-75: #66afe9bf; /* 75%透明度，对应十六进制值bf */
  --color-blue-400-60: #66afe999; /* 60%透明度，对应十六进制值99 */
}

input {
  box-shadow: inset 0 1px 1px var(--color-blue-400-75),
              0 0 8px var(--color-blue-400-60);
}

所有支持CSS变量的浏览器都能正常解析这种写法。

2. 使用rgb()函数拆分颜色通道

将颜色拆分为RGB三个通道的数值变量，结合0-1范围的透明度变量使用：

:root {
  --color-blue-400-r: 102;
  --color-blue-400-g: 175;
  --color-blue-400-b: 233;
  --opacity-75: 0.75;
  --opacity-60: 0.6;
}

input {
  box-shadow: inset 0 1px 1px rgb(var(--color-blue-400-r), var(--color-blue-400-g), var(--color-blue-400-b), var(--opacity-75)),
              0 0 8px rgb(var(--color-blue-400-r), var(--color-blue-400-g), var(--color-blue-400-b), var(--opacity-60));
}

注意：这里的透明度变量必须是0到1之间的小数，符合rgb()函数的alpha参数要求。

3. 正确使用color-mix实现透明度效果

通过混合目标颜色与透明色（transparent）来模拟透明度，混合比例就是颜色的不透明度：

:root {
  --color-blue-400: #66afe9;
}

input {
  box-shadow: inset 0 1px 1px color-mix(in srgb, var(--color-blue-400) 75%, transparent),
              0 0 8px color-mix(in srgb, var(--color-blue-400) 60%, transparent);
}

这种写法需要浏览器支持color-mix（Chrome 111+、Firefox 113+、Safari 15.4+）。

4. 利用CSS变量的字符串插值（兼容性有限）

部分现代浏览器支持通过var()的 fallback 特性实现字符串插值，但兼容性不稳定，不推荐生产环境使用：

:root {
  --color-blue-400: #66afe9;
  --opacity-75: bf; /* 十六进制透明度值 */
  --color-blue-400-75: var(--color-blue-400, "")var(--opacity-75, "");
}

input {
  box-shadow: inset 0 1px 1px var(--color-blue-400-75);
}

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