Making the transition to PostCSS is relatively straightforward. We need, of course,to update our compilation process to remove links to SASS, and introduce our PostCSS plugin.
In terms of changing the CSS, it's a little more complicated, as we have to work out how many columns are required for each grid block. Fortunately, our example is relatively straightforward, as we numbered the original blocks with the appropriate column count, so we can use that as a basis for changing our CSS.
Let's make a start with updating our compilation process:
We'll start by extracting a copy of the
Tutorial31folder from the code download that accompanies this book. Save it to the root of our project area.From the
Tutorial31folder, go ahead and extract copies ofpackage.jsonandgulpfile.jsfiles. Save these to the root of our project area.Next, we need to install the
postcss-neatplugin. For...