Sass and Compass for Designers

The saturate and desaturate functions

The saturate and desaturate functions adjust the saturation value for a color. Let's use this to create a color for our next list item:

&:nth-child(4) a {
  background-color: desaturate($color1, 80%);
}

Here is how that compiles in CSS:

.chapter-summary:nth-child(4) a {
  background-color: #996666;
}

And the following screenshot shows our fourth list item in the browser (note that the dotted borders on the list items have been removed at this point for clarity):

The saturate function increases the saturation level of a color. We'll use it on the fifth list item along with a hex value instead of a variable (just because ...