Set up “Variables” for Colors in CSS

Avatar of Chris Coyier
Chris Coyier on

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.

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.