11Creating Themes with Advanced Colors

Altering a color palette is always a pain. If we want a less saturated color, we go to the hex charts, find a color that is lighter or darker, then replace our original hex code with that. Let’s say we have a background with the color #336699, and we want to make some text a little bit lighter (or a bit more saturated). We stab around in the dark until we find a suitable shade.

Sass makes this conversion a lot easier with a few neat functions. We’ve got lighten and darken, saturate and desaturate, and there’s a whole bunch more in Appendix 1, SassScript Function Reference. Just put the function before the color you wish to change.

But this doesn’t just work for straightforward colors—we can also use ...

Get Pragmatic Guide to Sass 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.