Feature: support var(--variables) with fallback for runtime change

We have in :root a map of variables with can be use by default in all elements/components with proper fallback. Can we add another $support-css4 to generate additional fallback styles? This feature can be added later in roadmap if docs aren’t stable right now.

Example:

.swatch-blue {
    color: #fff;
    background-color: #007bff;
}

to:

.swatch-blue {
    color: #fff;
    background-color: #007bff;
    background-color: var(--blue);
}

Benefits:

• works same as before
• new way to change color in runtime!
• can be change by js in one place to enable fast change of parameters
• can be enabled by setting

$support-runtime-variable or $support-css4

(or something like that)

• this feature expand to not only colors but breakpoints and other properties

Need to:

• check if some browser incorrect implement that feature
• invert colors can be tricky

How to do that in clever way and I added benefit of this approach: https://codepen.io/anon/pen/XVLvLQ

Better idea:

• create some tool like autoprefixer to enable it by default without bloat code. But add documentation about that solution on site so no new issue will be generated.

Documentation and credits for amazing work: https://getbootstrap.com/docs/4.0/getting-started/theming/#color https://css-tricks.com/difference-between-types-of-css-variables/

[hwhelchel]

Being able to easily change the theme colors at runtime would be a very neat feature.

Let me know if I can help write a PR to add support.

[mdo]

Closing out as not a bug and not a feature request we can take on right now. I think we’re better served in v4’s lifespan by focusing first on Sass variables and then CSS as a first class come v5 or so.