Set up “Variables” for Colors in CSS

Avatar of Chris Coyier
Chris Coyier on

I say “variable” because CSS doesn’t natively support real variables. The debate is somewhat heated on whether it should or not. I’m not going to take a stand on that one, but there is a clever little hack bouncing around on how to accomplish about the same thing with one little extra step. For colors, anyway. It is as simple as including a commented section in your CSS such as this:

/* 
   Light Blue: #afd2f0
   Dark Blue: #0f4574
   Bright Red: #fa0606

   Link Color: #3674bb
   Post Background Color: #fffbd8
   Post Title Color: #9a8f2e
*/

Throughout your CSS, you will use these hex values for the appropriate objects. Then, say you want to change the color you are using for your Link Color, just do a find/replace all of that hex code in any text editor.

findreplacetextmate.png

One extra step than what a variable could accomplish, but it sure does beat hunting down where exactly to change what color.