是否可以在内容属性的值中使用CSS自定义属性？

Question

示例：

:root {
    --PrimaryThemeColor: #3acfb6; /* with or without quotes */
}

.ColorSwatch:after {
  content: var(--PrimaryThemeColor);
}

当渲染它时，计算出的CSS实际上是该值。

content: var(--PrimaryThemeColor);

即使我使用的是一个将计算值注入后备的后处理器，该值本身也不是字符串，因此它对content无效。

.ColorSwatch:after {
    content: #3acfb6;
    content: var(--PrimaryThemeColor);
}

Answer 1

自定义属性的值必须是一个字符串（字符串文字，attr()表达式，或者content任意数量的所述标记的任意组合），以便相应的var()表达式可以在预期字符串的任何位置正常工作。

如果您要问的是，无法通过var()函数将非字符串值转换为字符串或任何两种数据类型。该值始终按原样进行解析，存储和替换，并且该值可以包含任意数量的任何类型的令牌，因此在数据类型之间进行转换将非常困难。