Can you reference one data value by a name throughout a stylesheet?

Question

For example, I'm changing color pallettes throughout a site i'm coding and would love it if i could reference that color somehow instead of replacing the hex value for every item. I know the following doesn't work but i'd like something similar.

color1 = red;
color2 = blue;
color3 = green;

h1 {
color: color1;
background-color: color2;
}

h2 {
color: color2;
background-color: color3;
}

score 5 · Answer 1 · 2011-06-06T16:17:06.870

5

What you're asking for is CSS constants and they've been cried for in the web community for years. Not gonna come, sadly.

The usual suggestion is to define container classes to only hold color values then paint document elements by attaching those marker classes:

.color1 { color: red; }
.color2 { color: blue; }
.color3 { color: green; }

<html>
  <body>
    <h1 class="big-header color1">Title</h1>
  </body>
</html>

edited Jun 06 '11 at 16:17

answered Jun 06 '11 at 16:01

thank you. that's PRETTY much what i've been doing so i'm on the right track. – Jephrei Jun 15 '11 at 16:14
You shouldn't use presentational class names. – melhosseiny Jun 18 '11 at 20:48

score 3 · Accepted Answer · answered Jun 06 '11 at 16:03

3

This is among several missing features in CSS. You can still get this functionality, but you need to move outside the box. Take a look at Less CSS. It's really quite nice.

answered Jun 06 '11 at 16:03

Peter Rowell

7,498

Sorry, can only give this +1 – kevin cline Jun 06 '11 at 16:37
oooh. i like that. not sure if i'll use it for good but i'll check it out. thank you. – Jephrei Jun 15 '11 at 16:14
@Jephrei: If you use LessCSS on the server side (using Node.js) to generate your .css files, you can have all of the benefits of it but not impact your page coding at all. – Peter Rowell Jun 15 '11 at 16:39

Can you reference one data value by a name throughout a stylesheet?

2 Answers2