Lesson Weekend

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;

  1. A color value (which can be a hex code, an RGB value, or a Sass variable referring to either).
  2. A percentage amount between 0% and 100% 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

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:

Lesson 2 of 36
Last updated more than 3 months ago.