Search code examples
csstwitter-bootstrapbootstrap-4css-variables

CSS use color from another class?

Is it possible to import a color from one CSS class to another? Or create some sort of global color define and then use it in multiple classes so that doesn't have to be updated in multiple places if you want to change a color?

For example say I have a CSS class that I want to use for specific elements but I want it to use the same color assigned to the Bootstrap "danger" class. Is there any way to do that? Or do I just have to copy the color value from the Bootstrap CSS file and use it in my own class?

Solution

  • You may also want to look at the new CSS variables in Bootstrap 4. They will let you override colors, but you'll need to redefine the CSS class.

    CSS variables offer similar flexibility to Sass’s variables, but without the need for compilation before being served to the browser.

    For example:

    .text-teal {
  color: var(--teal);
}

    Bootstrap 4 CSS Variables Demo