是否可以在content属性的值中使用CSS自定义属性？ [英] Is it possible to use CSS Custom Properties in values for the content property?

问题描述

示例：

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

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

当渲染时，计算的CSS字面上就是该值。

When this is rendered, the computed CSS is literally that value.

content: var(--PrimaryThemeColor);

即使我使用后处理器注入计算值作为后备，本身不是字符串，因此对 content 无效。

Even if I'm using a post-processor that injects the computed value as a fallback, the value itself isn't a string, so it's invalid for content.

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

推荐答案

必须是字符串表达式（字符串， attr（）表达式，或任何数量的所述令牌的任意组合），以便对应的 var（）表达式在任何需要字符串的地方正常工作。

The value of the custom property has to be a string expression (either a string, an attr() expression, or any combination of any number of said tokens) in order for the corresponding var() expression to work correctly anywhere that a string is expected.

不能将非字符串值转换为字符串或任何两个数据类型之间通过 var（）函数，如果这是你问的。该值总是被解析，存储和替换为原样，并且该值可以包含任意数量的任何种类的令牌，因此在数据类型之间转换将非常困难。

It is not possible to convert a non-string value to a string or between any two data types through the var() function, if that's what you're asking. The value is always parsed, stored and substituted as-is, and the value can comprise any number of any kind of token, so converting between data types would be... pretty difficult.

这篇关于是否可以在content属性的值中使用CSS自定义属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！