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

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

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

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

当这个被渲染，计算CSS是字面上该值。

content: var(--PrimaryThemeColor);

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

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

来源

2016-08-03 Kevin Suttle

你的意思是“带或不带引号”？它应该可以正确使用引号。 – BoltClock

是的，这是可能的。但是你的问题似乎是将一种颜色转换为一个字符串，而不是在'content'中使用一个变量。 – Oriol

当应用于CSS属性时，CSS变量起作用，但在应用于内容时不起作用。 CSS变量不像JavaScript变量那样以字符串形式打印其值。 – Buffalo

自定义属性的值必须是一个字符串，以便使相应var()表达式（无论是一个字符串，一个attr()表达，或在content的情况下，任何数目的任何组合，所述令牌）在任何需要字符串的地方正常工作。

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

来源

2016-08-03 19:14:42 BoltClock

对，我已经指出了。 >“这个值本身不是一个字符串，所以对内容无效。” –

@Kevin Suttle：是的 - 所以你已经回答了你自己的问题。 – BoltClock

似乎是一个相当常见的用例，所以将'var'语法扩展为'var（ - name type-or-unit）'很好。这将允许'font-size：var（ - size px）'，从而避免繁琐的'font-size：calc（1px * var（ - size））'，并且在这种情况下，将允许'内容：var（ - primaryThemeColor字符串）'。（''type-of-unit''当然与'attr（）'函数中使用的语义相同）。 – 2016-11-20 11:05:41

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

回答

相关问题