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 ...
Get Sass and Compass for Designers now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.