Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 399
Simon Avatar asked Jan 18 '10 17:01

Simon


People also ask

Can you define colors in CSS?

The most common way to specify colors in CSS is to use their hexadecimal (or hex) values. Hex values are actually just a different way to represent RGB values. Instead of using three numbers between 0 and 255, you use six hexadecimal numbers.

How do I run HTML CSS and JavaScript together?

To link a CSS file with your HTML file, you have to write the next script on your HTML file inside the head tag. To link a Js file with your HTML, you only have to add the source of the script inside the body tag or outside; it doesn't matter.

Can you mix CSS and JavaScript?

No, you can't combine js and css into one file.


2 Answers

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.

like image 68
Pekka Avatar answered Sep 28 '22 04:09

Pekka


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/
like image 25
Leo Avatar answered Sep 28 '22 06:09

Leo