Use CSS Variables instead of SASS in Themes

[Shogoki]

Just stumbling across this. Hope this was not already discussed somewhere else..

Right now the theme variables are already exposed as CSS Variables, why not also use them inside the template instead of there SASS equivalents?
This would allow us to override those on demand without having to build a custom theme.

@hakimel any thoughts about that? I´d love to help with a PR implementing this, if this is a way to go for you.

[Shogoki]

Please see my updates in the related PR #2740

[Delapouite]

I agree that the support of CSS variables would greatly simplify the customization of themes on the fly instead of relying on SASS.

The metrics regarding their support in modern browsers is good, with 95% overall: https://www.caniuse.com/css-variables

[hakimel]

Makes sense to me. The PR has been merged 🚀

[hakimel]

FYI @blairmacintyre raised a good point in #2967 that the generic variable names could end up conflicting with other page styles. To avoid that, all variables names are now prefixed with r-, for example --background-color is now --r-background-color. #2968

[edemaine]

Thanks for releasing this! Here's an example of the resulting simplification.