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

Transitioning to using PostCSS plugins

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:

  1. Fire up a Node.js 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-nesting
    
  3. Node.js will go away and install the plugin—it is ready for use when we see something akin to this screenshot:

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