Proposal: CSS Variables read-only reflection of some global Sass variables

I tried to search, but turns out searching for “css variables” or even “custom properties” isn’t particularly helpful. In any case I did go through a bunch of issues and didn’t see this mentioned. Thus:

Background: situations where adding Sass to the build pipeline is not feasible or not wanted, but one still wants to use Bootstrap values (e.g. colours, sizes, timings) in custom CSS.

Proposal: to add a :root {} section in the default generated CSS that writes out something like:

:root {
  --blue: $blue;
  --indigo: $indigo;
  --purple: $purple;
  --pink: $pink;
  /* etc */
}

Usage would then look like:

.custom-component {
  box-shadow: var(--dark-gray);
  color: var(--indigo);
}

That would either be directly supported by browsers (except IE, Edge, some mobile browsers) or more likely right now compiled-in by the build tool (e.g. PostCSS plugin postcss-custom-properties). Because this is supported right now in modern / dev-used browsers, it also brings a newish component to live editing via the Inspector.

Compatibility: in the event that someone is already using custom properties named the same as the bootstrap variables, then this would only affect them if the bootstrap ones come after their own (otherwise the cascade would take care of it). Apart from that, I don’t see any other compatibility problems, but I might have overlooked some.

[mdo]

Tried a PR over at #23446.

[RehanSaeed]

Could you use this to dynamically change the primary and secondary colours using JavaScript? Something like this:

document.documentElement.style.setProperty('--primary', 'purple');

As far as I can see, the variables are not used anywhere.