CSS Custom Properties (CSS Variables)

[Henni]

As mentioned in the original scss variables issue (#3256 (comment)), it would be great to have custom properties (aka css variables) which reflect the scss properties in variables.scss.

The goal would be to introduce something like this:

$color-main-text: #000000;
:root {
  --color-main-text: $color-main-text;
}

These custom properties could then be used instead of the scss variables (or in addition to allow backwards compatibility).

The main advantage of this would be these variables could also be read and modified by Javascript.
For example we could offer an instant preview in the theming app.

Custom properties are supported by all browsers except IE (caniuse).
But as this can be implemented as progressive enhancement we don't have to worry about support for IE.

[skjnldsv]

Should this replace our current variable system then?
I think we should wait for @karlitschek's approval fro dropping IE. :)
Then we'll have a lot more possibilities css speaking ;)

[karlitschek]

Well if it would be that easy ;-) It's not really my decision but the decision of the user out there. And unfortunately IE is still used a lot. Hopefully this changes soon.

[juliusknorr]

Implemented in #9723

[skjnldsv]

As a reference, we went for it with a dedicated fallback for ie11: https://github.com/jhildenbiddle/css-vars-ponyfill