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

Exploring custom media queries in PostCSS

Making the switch to using PostCSS is a cinch, we can use the postcss-custom-media plugin for this purpose, available at https://github.com/postcss/postcss-custom-media.

The plugin is easy to install, it follows the same principles as all of the other plugins we've covered, so without further ado, let's get that out of the way now:

  1. Fire up a Node.js command prompt, then navigate to the working directory.
  2. At the prompt, enter this command, then press Enter:
    npm install --save-dev postcss-custom-media
    
  3. Keep the command prompt open for now, we will use it in the next few steps.

    With the plugin installed, we can now use it, before we get stuck into converting our previous demo, let's work through a simple example, ...

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