Can I make a custom colour definitions that I can share between CSS, JS and HTML?

Question

I have a blue-ish colour that I want to use in many places in my app and at the moment I am copying and pasting it between styles in my CSS. Is there a way of defining a constant like the standard colours, 'blue', 'red' etc. that I could share between my CSS, my HTML and my JS?

I'd like to be able to say (somewhere, preferably CSS)

myblue = #33CC99

in CSS say...

background-color:myblue;

in HTML say...

<td color="myblue"/>

and in JavaScript

tag.style.backgroundColor = myblue;

I'm guessing this is impossible and google turned nothing up, so has anyone got any ideas? I doubt I am the only person to come across this.

Answer 1

A very promising product that "compiles" higher-level expressions like variables into CSS is LESS. It needs Ruby. I haven't used it yet but it's definitely worth a look.

A more primitive way to do this would be using a server-side scripting language like PHP.

You would define constants in PHP like so:

define ("MYBLUE", "#33CC99");

and then outputting the value where needed using <?=MYBLUE;?>

Big downside: To do this in external css and js files, you would obviously have to have them parsed by the PHP interpreter, which is not good performance wise if you have a lot of visitors. For a low-traffic site, it probably doesn't matter.

Answer 2

Yes, this is impossible. You could, however, write your own CSS preprocessor (or use one of the existing ones out there), for instance with PHP. The big downside is that you would have to output the colorcode on your whole site with PHP and your scripts would look like

tag.style.backgroundColor = <? echo $myblue; ?>

and likewise in CSS

.someClass {
  background-color: <? echo $myblue ?>
}

or something similar. And that isn't really nice either. Of course you could use any server sided script language of your choice. As far as I can judge, this is the only possibility to use a color-constant throughout a whole website.

You could have a look at some processors:

• http://cssp.codeplex.com/
• http://www.shauninman.com/archive/2007/06/27/css_server_side_pre_processor
• http://icant.co.uk/articles/cssconstants/