Sass and Compass for Designers

The lighten and darken functions

The first two Sass color functions we will use are lighten and darken. As you might imagine, these lighten and darken an existing color using HSL color manipulations. Let's use lighten to amend an existing value and property pair. We will change the following code:

background-color: #eee;

To the following:

background-color: lighten($color10, 93.5%);

Instead of declaring the color itself, we are telling Sass 'lighten the value provided by 93.5 percent'. In this instance, the value being passed to the lighten function is the variable $color10. While the syntax may seem verbose (as opposed to simply writing the hex, RGB, or HSL value), it makes authoring far faster as it's possible to make quick alterations to colors ...