Grow your CSS skills. Land your dream job.

Set up “Variables” for Colors in CSS

Published by Chris Coyier

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.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".