[css-variables] shortening `prop: var(--x);` to `prop: --x;`

[caub]

It should be non-ambiguous when then CSS variable is defined (on the left of :) or used (on the right)

so this would be really great to have:

:root {
  --x: blue;
}
div > span {
  color: --x;
}

[Crissov]

This and other syntax proposals have been discussed several times. My favorite one was requiring a double hyphen anywhere within the property and value: x--y.

[Loirooriol]

--x is a valid identifier, and some properties accept arbitrary identifiers as their values.

:root {
  --x: lower-roman;
}
@counter-style --x {}
li {
  list-style-type: --x;
}

Right now --x is the user-defined counter style and var(--x) is the inherited variable. With your proposal it's ambiguous.

One could argue that --x should have remained as an invalid identifier (as it was in CSS2), and reserve this syntax just for variables. But now it's probably too late, and being able to define counters that won't conflict with future specs is also nice.

[tabatkins]

Yeah, since CSS intentionally adopted the -- prefix as a generic way to indicate an author-defined term when there is the potential for collision with CSS-defined keywords, this is definitely not possible.

(@color-profile is the first place this is explicitly used.)