In addition to the JavaScript-like operators we saw in the last lesson, Sass also offers its own built-in functions for a series of actions. There are functions for everything from rounding numbers to adding quotes around a string, and more.
But some of the coolest and most commonly-used functions are for programmatically manipulating colors. They can generate a perfectly-complementary color for another color, lighten or darken a color, and more. Beyond being fun to use, these functions can save us time, keep code DRY, and make styles easier to reuse later. Let's check 'em out.
Required Videos
Before we dig into the list of available functions, let's watch the following two videos to familiarize ourselves with what these functions do, and where/how they're used in a basic Sass stylesheet:
Color Functions by NetNinja
7 Useful Sass/SCSS Functions by GeekLaunch
Color Functions
Now that we've seen what these color functions are capable of, let's review some of the most common.
Basic Color Manipulation
The following four are basic functions used to tweak existing colors, as seen in the videos above:
lighten(color, amount): Returns a lighter version of a given color.darken(color, amount): Returns a darker version of a color.saturate(color, amount): Returns a more saturated version of a color.desaturate(color, amount): Returns a less saturated version of a color.
Each takes two arguments;
- A color value (which can be a hex code, an RGB value, or a Sass variable referring to either).
- A percentage amount between
0%and100%denoting how drastic the change should be.
We can see the result of these functions in online Sass color generators like this one. For instance, if we wrote a line of Sass like this:
$primary-color: #ef4422;
$lighter-primary-accent: lighten($primary-color, 20%);
The $lighter-primary-accent variable would contain the color #f69481, as can be seen here:
The adjust-hue(color, degrees) method can also tweak the hue of a color. It takes two arguments; a valid color, and a number of degrees between -360 and 360 followed by deg (for instance, adjust-hue(#811, 45deg), or adjust-hue($secondary-color, 200deg)). These degrees refer to how far we want to move the color's hue along the color wheel.
Creating New Colors
The following are used to drastically manipulate provided color value(s), essentially creating a new shade:
grayscale(color): Returns a color's grayscale equivalent.complement(color): Returns the mathematically-perfect complementary shade of a provided color.invert(color): Returns the inverse of a color.mix(color1, color2): Returns the result of mixing two provided colors together.
Opacity
The following make a shade more or less opaque. They each take two arguments. The first represents a color value, and the second represents a number between 0 and 1:
opacify(color, amount): Returns a more opaque version of a provided color.transparentize(color, amount): Returns a more transparent version.
Like basic programming methods, any of these color functions can be chained together too. For instance, the following is totally valid Sass syntax:
$new-color: saturate(lighten($old-color, 50%), 10%);
Benefits of Color Functions
Being able to programmatically manipulate our styles' color values like this is really powerful. Not only does it allow us to save time tracking down and manually inserting colors' hex or RGB values, it makes our styles really reusable and maintainable too.
If we define all colors as variables, minimize the number of hard-coded hex or RGB values, and programmatically define as many of those variables as possible based on these few hard-coded values, we can generate a whole stylesheet with a specific color scheme, then later drastically change its entire color scheme by editing only a few hardcoded values. No tracking down new hex values, using calculators and palettes to locate their complementary colors, or similar shades, and no re-writing large chunks of code.
Helpful Resources
The Sass Color Generator, mentioned above, allows us to insert any hex value to see what shades can be produced by using
lighten(),darken(),saturate(), ordesaturate()upon it.Jim Nielson's SassMe color generator allows us to select any two valid hex colors to receive the necessary Sass logic to turn one into the other. For instance, the blue shade on the left of this image will transform into the pink shade on the right with this single line of code:
adjust_hue(desaturate(lighten(#04568b, 35), 38), 124).Similar to the generator above, this generator on CodePen will output the Sass necessary to turn any provided shade into a programmatically-created color scheme.
More Functions
Color functions are considered the most useful, and widely-used Sass functions. However, there are more too. Check out the Sass documentation on functions for the full list.
Additional Resources
Interested in learning more about this topic? We recommend the following resources:
Hugo Giraudel's How to programmatically go from one color to another in Sass discusses some clever tricks for using built-in Sass functions to programmatically generate color schemes mathematically guaranteed to be complementary. Read through this resource, and give it a shot in a project of your own.
And, if the idea of creating functions to generate color schemes interests you, try the tips recommended in Sebastian Ekstroem's How to dynamically change text color based on a background color too!