是否可以在 content 属性的值中使用 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 的情况下，任意数量的所述标记的任意组合）以便对应的@987654323 @ 表达式可以在任何需要字符串的地方正常工作。

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