This post was published 12 years ago
There's a chance things are out of date or no longer reflect my views today
Using scale-color in Sass
I have been recently trying to get a consistent look across my element mixin no matter the colour. That’s where scale-color comes in.
I have been recently trying to get a consistent look across my element mixin no matter the colour, without being too inefficient. You could say simply take a base colour, and use darken and lighten on it, to get reasonable variations of the colour, for gradient colour stops. Then throw in some bevels, a border, and you have a nice button.
There comes a point where you’re thinking, the bevel could be less, the shadows are too intense for this colour. How do I solve this without the hassle of comparing if a colour is a certain saturation, lightness and so on. Difficult right?
Using scale-color
It isn’t difficult with scale-color. You pass your colour and adjust as needed with the $lightness and $saturation parameters (if need be and there are more parameters).
For example
@include background(linear-gradient($color, scale-color($color, $lightness: -20%)));
It might be a little extra to type, but let me show you it’s worth it as scale-color changes colour differently. Here’s some examples.
Level it out
I have matched the colours best I can to demonstrate from a level point. Other examples will be using the same percentages to change the colour.
A red gradient using scale-colour.
@include background(linear-gradient(scale-color(#dd453d, $lightness: 50%), #dd453d, scale-color(#dd453d, $lightness: -50%)));
A red gradient using darken and lighten.
@include background(linear-gradient(lighten(#dd453d, 22.4%), #dd453d, darken(#dd453d, 28%)));
As you can see the difference in the values to achieve something that is identical. Now you may think that should work fine for any colour. Here are more examples why it won’t.
Example one
A green gradient using scale-colour.
@include background(linear-gradient(scale-color(#88a23d, $lightness: 50%), #88a23d, scale-color(#88a23d, $lightness: -50%)));
A green gradient using darken and lighten
@include background(linear-gradient(lighten(#88a23d, 22.4%), #88a23d, darken(#88a23d, 28%)));
Example two
A blue gradient using scale-colour.
@include background(linear-gradient(scale-color(#3a9ac9, $lightness: 50%), #3a9ac9, scale-color(#3a9ac9, $lightness: -50%)));
A blue gradient using darken and lighten.
@include background(linear-gradient(lighten(#3a9ac9, 22.4%), #dd453d, darken(#3a9ac9, 28%)));
Finishing comments
From the examples you’ll see their differences along the way from colour to colour. Comparing the examples which aren’t using scale-color you’ll notice while they may look fairly similar there is a slight difference. It becomes more apparent as you use more colours.