SASS & Declare Color Variables

For declaring color variables in SASS there few tips or syntax which we need to write.

The CSS Way

Below is we use colors in plain old dumb CSS:

1 2 3 4 5 6

.myClass{   color: #333333; } a{   color: #001eff; }

Simple enough. But the problem is that if I want to change a color, I usually have to change it in multiple places.

Variables to the Rescue

SASS lets us define reusable variables, which can be used for any type of value but are especially useful for colors:

1 2 3 4 5 6 7 8 9 10 11

// first we set the variables: $darkgrey: #333333; $lightblue: #001eff; // now we can use them in our code: .myClass{   color: $darkgrey; } a{   color: $lightblue; }

Functional Variable Names

Thankfully there’s a simple solution: instead of using variable names that describe the color, we’ll use names that describe the color’s function.

1 2 3 4 5 6 7 8 9

$text_color: #333333; $link_color: #001eff; .myClass{   color: $text_color; } a{   color: $link_color; }

Now we can change our link color without introducing any ambiguities in our code. 

We can declare descriptive and functional variables in two levels

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

// first we set descriptive variables: $darkgrey: #333333; $blue: #001eff; // then we set functional variables: $text_color: $darkgrey; $link_color: $lightblue; $border_color: $lightblue; .myClass{   color: $text_color;   border-color: $border_color; } a{   color: $link_color; }

Want to make links red instead of blue, but without affecting the color of the borders? Not a problem!

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

$darkgrey: #333333; $lightblue: #001eff; $lightred: #ff0000; // set your new color… $text_color: $darkgrey; $link_color: $lightred; // …and use it here $border_color: $lightblue; .myClass{   color: $text_color;   border-color: $border_color; } a{   color: $link_color; }

So here you go. This is a simple tip, but I hope you’ll find it useful!