Adding variable support to PostCSS

The beauty of PostCSS plugins is that most (if not all) can be installed using the same method as PostCSS itself, we can use the package manager of Node.js to handle the process.

We'll start with postcss-css-variables, which we will use to handle variable support; the source for this plugin is available from https://github.com/MadLittleMods/postcss-css-variables. Let's get it installed:

1. Fire up a NodeJS command prompt, then change the working directory to our project area.
2. At the command prompt, enter the following command, then press Enter:

   npm install --save-dev postcss-css-variables
   

3. If all is well, we should see the results of the installation appear, as shown in this screenshot:
   

At this point, Node will have also added an entry to the package.json file for the new plugin. Perfect—we can now put it to good use and switch to using the plugin in place of using SASS. Let's take a look at how to achieve this, as part of the upcoming exercise.