Bootstrap 4 - Reference a color by root name in css

Question

I'm using a nice Bootstrap 4 css theme which overrides default one with very nice colors but I'm not being able to "reference" a color by its root name from css.

Lets explain better, Bootstrap has some root colors which names are "success", "danger", "dark", "light" and so (and so the custom theme css template), and -of course- they have an hex representation and I'd like to apply one of this colors to a link hover calling it by its root name and not by its hex code.

To be more clear, I'd like to be able to do something like the next:

.dropdown-menu > a:hover {
  color: success; /*or dark or danger or whatever */
}

This way, if I change the template in the future, all colors will adjust autommatically to the new template values and all app appearence will stay in "harmony" with the new general template aspect.

I'm not sure this is possible using pure css but maybe there is a workaround.

As you see, my goal is to be able to have as much colors as I can referenced by name (let's say dynamically instead of statically using hex) so if I change the bootstrap css template all colors adjust autommatically to new template values.

Any help / ideas?

Solution

They are CSS Variables. You can reference them like...

.dropdown-menu > a:hover {
  color: var(--success);
}

https://codeply.com/go/vFE9n0VrGz

Related: CSS use color from another class?

Comments

[Diego Perez]

Thank you for your time @Quentin Veron. Didn't know about CSS variables and that's did the trick perfectly and although it's not fully supported by all browsers as Itay Gal said I've tried in three of the major browsers and it worked so for now I'll go with it as it's simpler as Sass.

[Diego Perez]

Thanks @Zim. As I said, I didn't know about CSS variables and that's did the trick perfectly and although it's not fully supported by all browsers as Itay Gal said, I've tried it in three of the major browsers (including mobile) and it worked so for now I'll go with it as it's simpler as Sass and will mark your answer as correct.

[Diego Perez]

Thank you very much @Itay Gal, you are technically correct and your answer should be marked as so but I don't know about Sass and I was looking for a simple solution and CSS variables worked in some of the major browsers (including mobiles) so for now I'll go with that solution until I have time for going deep into Sass.

[Diego Perez]

Thanks @IJ D, your answer is the same as Zim, which is already marked as correct.

[Zim]

It is widely supported except in IE 11 and Opera.

[Miguel Stevens]

I suppose you only use this when not using scss?