Dan Denney

Sass Color Variable Pop Quiz

I had a question about color variables

Each project has some really easy to define colors that can get you started. Base font color, a highlight color, link color, etc. Once you're a few hundred lines in though, you start coming across more colors that are used for shading, borders, highlights, etc.

I knew Nick and Drew would have answers, so I popped some questions into the Envy Design Campfire.

How many times do you have to use a color before it should be a variable and how do you conjure up names beyond the first 6 or 7?

Nick chimed in with "if I use it more than three-ish times, it's usually time to variableize it or if it's a completely different color that doesn't fall into a sass-adjustment case (e.g blue theme, random green button appears)". Drew followed up with a gist of examples that was something like this:

Brand Colors
$color-brand-a: #606E67
$color-brand-b: #C98344
Base Colors
$color-base: #636365
$color-body: #EFEDDF
$color-border: #A9A9A9
$color-header: #3F4944
$color-input: #DCD7CE
Button Colors
$color-btn-a: #228B9B
$color-btn-b: #783737
$color-btn-c: #BFBEB2
Utility Colors
$color-error: $color-btn-b
$color-success: $color-header
Container Colors
$color-block-a: $color-header
$color-block-b: desaturate(darken($color-body, 4%), 11%)
$color-block-c: #D4D5C2
$color-card-a: lighten($color-body, 4%)
$color-card-b: $color-block-b

To the Twitters!

I thought that this might be something cool that other people would have an opinion on. So I tweeted the questions and I'm sharing the answers below. Please chime in if you have a method. I love learning how other people approach these types of things.

Daniel Peplow aka @danielpeplow
How many times before variableizing? 1
Naming approach? red1, red2, darkred1, darkred2, primarybrand, secondarybrand depending on what is required
Chris Brauckmuller aka @cbrauckmuller
How many times before variableizing? 1
Naming approach? It depends. For neutrals I usually have $gray, $gray-light and $gray-dark. For the main brand colors, I would name the original color something like $brand-green. Then if I needed variants of that, I might do $brand-green-lighterX, where X just represents how many percent lighter it is versus the original.
Sample? https://github.com/cbrauckmuller/helium/blob/master/scss/config.scss
Elyse Holladay aka @elyseholladay
How many times before variableizing? 3
Naming approach? In a small/personal project, sometimes I'll just say 'blue' 'darkblue', etc. In the large apps I work on, especially ones that require theming, I try to cut down on # of available colors by using darken/lighten in SASS rather than 2 different shades of blue. I name "global" colors like black/white by their names. For themable colors, I go primary/secondary/tertiary/highlight/error/success, and so on.
Sample? https://gist.github.com/4550373
Chase Woodford aka @chase1263070
How many times before variableizing? 2
Naming approach? I try to stick to a ${groupName}-{differentiator} naming convention.
Sample? https://github.com/chasewoodford/chasewoodford.com/blob/master/css/sass/_variables.scss
comments powered by Disqus