-
Book Overview & Buying
-
Table Of Contents
Mastering PostCSS for Web Design
By :
We've seen that adapting code to use nesting is a simple principle, but the real art is getting the balance right, many developers fall into the trap of nesting everything in their code when using the technique for the first time.
With this in mind, let's explore how we can convert our code to using PostCSS. We'll start by installing the postcss-nesting plugin, which will perform most of the work for us:
Fire up a Node.js command prompt, then change the working directory to our project area.
At the command prompt, enter the following command, then press Enter:
npm install --save-dev postcss-nesting
Node.js will go away and install the plugin—it is ready for use when we see something akin to this screenshot:

With the plugin installed, we need to configure PostCSS to use it—open up a copy of gulpfile.js from the project area, ready for editing.
We need to make a few changes—the first is to assign a variable that references the plugin. Add the highlighted line...