O'Reilly logo

Mastering PostCSS for Web Design by Alex Libby

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

Creating color functions with PostCSS

In our journey through manipulating colors using PostCSS, we've so far seen how to define colors using palettes—this may work in some instances, but there will be occasions when we need to specify a color that doesn't feature in a palette.

We can always try to specify the value manually, but what happens if we need to alter it? Do we try to find every instance of it, and risk the possibility of missing an instance?

The answer is no. Instead, we can use the postcss-color-function plugin to create our colors dynamically; we can then assign the resulting value to a variable if we find ourselves frequently using this color. We can use this route to produce some nice shades of colors, so let's get stuck in and explore ...

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