O'Reilly logo

Pragmatic Guide to Sass by Michael Lintorn Catlin, Hampton Catlin

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required