Our orchid demo so far uses a number of variables to define values in our code. While this works well, it is somewhat limiting; after all, creating lots of variables to handle different values is an expensive use of resources!
A smarter approach is using mixins; this works well when we can group several statements together as a single definition, then clone this definition into multiple rule sets. Users of pre-processors will of course recognize this functionality; the PostCSS team have created a plugin to offer similar functionality within PostCSS.
The plugin source is available from https://github.com/postcss/postcss-mixins, and can be installed via Node, using the same method we've covered throughout this chapter. We will also make use of the postcss-calc plugin (from https://github.com/postcss/postcss-calc) to create a simple mixin that handles pixel fall-back for rem values in our code. Let's dive in and see how it works in action:
We'll start—as always—by...