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 we can):
&:nth-child(5) a { background-color: saturate(#996666, 40%); }
The following screenshot shows it in the browser: