Example:
:root {
--PrimaryThemeColor: #3acfb6; /* with or without quotes */
}
.ColorSwatch:after {
content: var(--PrimaryThemeColor);
}
The value of the custom property has to be a string (either a string literal, an attr()
expression, or in the case of content
any combination of any number of said tokens) in order for the corresponding var()
expression to work correctly anywhere that a string is expected.
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.