Loading...

What is SASS?

SASS Variables for ColorsSASS is a powerful tool in the modern developer’s toolkit. Syntactically Awesome Style Sheets, have been around, in some form or another, for over a decade. In the past few years, there has been wide-spread adoption thanks to tools like Gulp, Grunt, Codekit, Prepos, LiveReload and many more.

SASS can create easy-to-maintain, updatable, streamlined, and DRY CSS. It has turned website styling into a more complete language and cut hundreds of hours from site development. It is a truly powerful tool.

New to SASS? Learn more here.

With all programming languages, or in this case, scripting languages, there are always multiple ways to accomplish the same task. With this freedom comes opinions and best practices from seasoned developers. After years of leveraging SASS, I have acquired a few tips that I’ve picked up along the way.

What Are SASS Variables for Colors?

Variables are fairly straight-forward on the surface. You can set a value to a variable then use that variable in multiple rule-sets later in your code. This is easily one of the most important aspects of SASS. However, a lot of developers stop short of really utilizing the power. I’m going to touch on, what I consider to be, the most important parts of variables in SASS; Colors.

Here is a sample set of declarations that could have been lifted from one of my projects, though it is simplified for this post.



// Colors
$color-green-emerald: #6cb784;
$color-green-olivine: #00ff00;
$gray-light: #a5a5a5;

 // Setting static variables

$btn-color: $color-green-emerald;
$border-color: $gray-light;

$color-emphasis: $color-green-olivine

.sidebar {
    h3 {
        color: $color-emphasis;
    }
}

Prefix Your Variables:

This tip is often met with criticism at first; however, it has saved me tons of time when writing, updating, and reviewing code. It’s a simple modification that can safe countless hours when leveraging SASS variables for colors.

Prefixing your colors with the word color allows your code editor to prompt you with available colors. The larger the site, the more important this is. It’s probably rare to have other variables names that should be called $green. Though why risk putting yourself in that position?

But Why $color-green-emerald?

How often do you have multiple colors that could be named the same? Color variations are commonplace and are a necessary part of design. We can fall back on simplistic ways of doing things like…

$green-light, $green-regular, $green-dark, $green-darker, $green-darkest, $green-darkester…

OR we can use the closest matching color name available. Name That Color is a helpful tool that will tell you a color name based on a hex value. At first, this may be difficult; however, after a few uses, you will have a much more succinct color name and a richer color vocabulary to boot.

This kind of SASS variables for colors strategy can sometimes feel like it’s creating more work or that it isn’t utilizing proper DRY principles. There is a balancing act we must do on every project; although, it’s a safe bet that if you follow this rule, you’ll thank me in the future.