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