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

Updating our hover effect demo

If we're altering code to use PostCSS for the first time, it naturally makes sense to start with something simple; incorporating variables and mixins into our code is the perfect place to begin.

For this next exercise, we're going to create a handful of variables to store some values, then add a mixin to handle styles for the fonts used in the demo. Let's make a start:

  1. We'll start by opening up a copy of gulpfile.js from the root of our project area—we first need to make some changes to accommodate using the new plugin.
  2. In gulpfile.js, add this line immediately below the first block of var statements—this should be on or around line 9:
    var cssvariables = require('postcss-css-variables');
  3. We now need to make some changes ...

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