是否可以在 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），以便相应的var()表达式在需要字符串的任何地方都能正常工作。

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