Dealing with CSS Color Variables

What methods are you and your teams using to define Sass and LESS or CSS color variables?

Colors are one of those things that can be interpreted differently pretty easily, and are used throughout your entire project.

One method that has worked well for some of my teams thus far is to use a single defined source to pick the names of the color variables based on their Hex code, then determine whether to camel case, hyphenate or underscore to separate words.

For example:

$gray: #888888;
$spunPearl: #a6a5ad;
$silver: #c6c6c6;

Pros of this method:

  1. If your variable names come from one source, there isn’t a question about what constitutes “gray” or “blue.”
  2. You don’t end up with duplicate colors throughout your CSS codebase.
  3. Variable names are abstracted from their components and can be used anywhere.
  4. Easy to remember – easy to search.
  5. You never need to think about whether or not something is lighter gray, lightest gray, or lightest-est-est-est gray.

What are some other methods being used to define things like color variables in your Sass projects?

Leave a Reply

Your email address will not be published.