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.
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:
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.