8

Example: 

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

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

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

content: var(--PrimaryThemeColor);

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);
}
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Kevin Suttle
  • 8,358
  • 3
  • 33
  • 37
  • What do you mean by "with or without quotes"? It should work correctly with quotes. – BoltClock Aug 03 '16 at 19:29
  • Yes it's possible. But your issue seems to be converting a color to a string instead of using a variable in `content`. – Oriol Aug 03 '16 at 19:29
  • The CSS variable works when applied to a CSS property, but not when applied to the content. CSS variables do not behave like javascript variables printing its value as string. – Running Buffalo Aug 03 '16 at 19:30
  • 1
    If the variable holds a number, [this is possible using CSS Counters](http://stackoverflow.com/a/40179718/5545315). – darrylyeo Oct 21 '16 at 19:24

1 Answers1

7

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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • Right, I pointed that out already. > "the value itself isn't a string, so it's invalid for content." – Kevin Suttle Aug 03 '16 at 19:15
  • @Kevin Suttle: Yeah - so you've answered your own question. – BoltClock Aug 03 '16 at 19:17
  • 9
    Seems like a reasonably common use case, so it would nice to extend the `var` syntax to be `var(--name type-or-unit)`. This would allow both `font-size: var(--size px)`, and thereby avoid the cumbersome `font-size: calc(1px * var(--size))`, and in the case here, would allow `content: var(--primaryThemeColor string)`. (`type-of-unit` here, of course, has the same semantics as when used in the `attr()` function.) –  Nov 20 '16 at 11:05