Bill asks the CSS Guy if there is a way to use variables within CSS (Ask the CSS Guy)

Bill asks the CSS Guy if there is a way to use variables within CSS

Bill writes:

One thing I am not certain how to do, or if it is even possible is to define some sort of pseudo-variable that can be used in the CSS definitions. For example, I am working on a page that the owners want a specific color scheme used throughout the site. Each page has five colors (they all share the same set of colors). CSS has made my life sooo much easier to make changes they want (they are making several changes a day trying to "fine tune" the exact shades they want.

Anyway, it would be nice if I could do something like this:
#Red1 { color: #400000 }
#Cream1 { color: #F0E68C }
#Cream2 { color: #FAFAD2 }
#Blue1 { color: #00008B}
and then further in the CSS file uses these names like:
body {
  color: Blue1;
}

a {
  color: Red1;
}

a.footer {
  color: Cream2;
}

Bill, the short answer is no. CSS isn't built for that. Your editor's find and replace is your surest bet.

However, there is a longer answer, too. Many people have wanted this feature, and have found a way to make it happen using server-side scripting.

Please see this entry on 24ways.org for a well-written and relatively recent article on your options to achieve this. The comments themselves are enlightening as well. The last comment on that article has a link to a post that is particularly helpful in understanding why this feature wasn't included in CSS to begin with.

My advice is to stick to find and replace.

March 19, 2007 10:28 AM | digg | #

Comments (5)

Pedro Rogério said:

Pena que não funciona em nenhum brower, mas a idéia é interessante!!!

Posted March 25, 2007 2:25 PM | #

ben said:

you could also do an Apache mod re-write to allow php, asp etc.. within CSS (or JS for that matter).

ie..

some what of a "hack" but you shouldn't be losing any performance and it works for a number of different things.

Posted March 27, 2007 12:29 PM | #

benagain said:

comment box didnt like my tags.

so....

php

if ($blue) {
color:blue;
}else {
color:red;
}

end php

Posted March 27, 2007 12:31 PM | #

Mark Carey said:

I can emphasize with Bill. I have been in this situation many times before. Since I always use Movable Type when building sites, I use the builtin MT template variables to achieve this. For example, in my css template:

<$MTSetVar name="Red1" value="#400000"$>
<$MTSetVar name="Cream1" value="#F0E68C"$>
<$MTSetVar name="Blue1" value="#00008B"$>

body {
color: <$MTGetVar name="Blue1"$>;
}

a {
color: <$MTGetVar name="Red1"$>;
}

a.footer {
color: <$MTGetVar name="Cream1"$>;
}

I don't do this all the time, rather, precisely in those situations where you are testing a bunch of color variations. This way you can just change the colors in the variables at the top of the CSS template, then rebuild it, repeat.

Posted March 28, 2007 7:54 AM | #

pahtrick said:

http://www.designrefugee.com/design-blog/css-variables.html

for a comprehensive tutorial on PHP parsing & variables in CSS

Posted January 21, 2008 5:15 AM | #

Ask the CSS Guy