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 without needing to touch Photoshop, Fireworks, and the like.
The lighten and darken functions can be used on any color. As the amendments happen with an HSL-based manipulation, Sass is actually increasing (with lighten) or decreasing (with darken) the...
