CSS variables. Can this be done?

[Kindon]

I want to be able to set some global colors in a global style sheet. Then use those global settings in other style sheets using the import command.

Here is how I have it set up. I have two base style sheets (globals.css and template.css) that are used in several different web applications. In each application I created a style sheet that imports the global.css and template.css. I then add any additional changes that are needed beyond the "templates".

Global.css is where all the colors are set up. I want to set the colors once and then use those colors to build new components in the various applications. I keep wanting to set a variable like in JavaScript. Can this be done?

This needs to be set up in a way that if I change one color, it changes that color in all applications and its custom components.

 

[Kindon]

Here is an example:

color1 = "#000000";
table2 = { background : color1; }

Can this be done?

 

[dwarfthrower]

Not using CSS alone. You could use Javascript to do a search and replace over your stylesheet once the page had loaded. But I'm sure the effort involved would outweigh any benefit.