6

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?

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
Dan
  • 77
  • 1
  • 8
  • Pure CSS does not allow to do such things, what you need is called css preprocessor. There are a few css preprocessors: SCSS, SASS, LESS etc. – Cheslab Mar 01 '18 at 00:03

3 Answers3

6

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

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • Cool, this is exactly what I was looking for. – Dan Mar 02 '18 at 06:08
  • One more question.... is it possible to darken/lighten a color in CSS? Like use one of these colors, but slightly darker or lighter for :hover? – Dan Mar 02 '18 at 06:10
1

Use SCSS

Assign variables: 

$darkGrey: #7a7a7a;

Use those variables: 

ul, .hero, .homepage, .anotherClass {
  background: $darkGrey;
}

More here: https://responsivedesign.is/articles/difference-between-sass-and-scss/

David
  • 801
  • 8
  • 19
1

You can assign global color in ::root selector like an example below:

:root{
     --green-color:#fff123;
}

and use this color any where with var() function in css like:

.container{
    background-color:var(--green-color);
}

.column{
   color:var(--green-color);
}
Aslam khan
  • 315
  • 1
  • 7