Remember our demo with a Japanese theme from earlier, in Creating an example with Bourbon Neat? It's a simple demo, using Bourbon Neat to help create our grid. The downside, though, is, of course, the dependency on SASS!

Well, we can fix that: PostCSS has a plugin available that mimics Bourbon Neat, but is written entirely in JavaScript, so there is no dependency on SASS. It's easy to install and use, over the next few pages, we'll work through the changes required to switch to this plugin.

First though, let's get it set up:

Do you notice any difference to our SASS-only version of this demo, from earlier? Hopefully not; while it may not be pixel-identical to the original, it is not far from it! However, it does show that with a little ingenuity, it is possible to make the transition to using PostCSS and still maintain the same results. It will require a few changes to your code and processes, so let's take a look at these in more detail, starting with the style sheet.

Making the change to PostCSS

Making the switch requires changes in both the gulp task file and style sheet. These are not to change how the page will look, but to maintain the same theme from the original demo. The key changes made to the style sheet are:

• The _reset.scss partial style sheet that we import will no longer work, as we are removing the reliance on SASS. To maintain its use, a compiled version was created using the online playground at Sassmeister (http://www.sassmeister.com); we can then link to it from our markup page.
• If you take a peek at the source version of sample.css, you will see a :root block at the top of the file; this replaces the import statements we used. This block can be used to store any variables used, and we will cover this in more detail when we explore the changes made to our gulp task file.
• We no longer needed the following three statements; they are used to debug the SASS version of Bourbon Neat, and were then removed:

  $visual-grid: true;
  $visual-grid-color: #E6F6FF;
  $visual-grid-opacity: 0.4;

• We're using PostCSS equivalents for all of the variable statements. The SASS versions were modified using search and replace from $... to var(--….), where the ... represents the variable name.
• Our original code had a number of references to Bourbon mixins which had to be updated. We used the same search and replace principle, this time changing @include outer… to @neat-outer… throughout the code.
• To keep things simple, we manually calculated any instance where $body-line-height was referenced, and replaced the calculation with the result. We could have stayed with using calculations, but it would have required the use of another plugin which would have been overkill for their limited use in our code.
• We also adjusted the width of the main area in our page; it's a minor quirk, but required to ensure we had two areas side by side, and not one above the other!

In addition to altering our style sheet, we also had to make some changes to the gulp task file. They center around replacing the main compilation task and adding in additional tasks to manage production and minification of our source files:

• We added in the rename, lint-styles, and sourcemap tasks covered in earlier demos. These already worked well, and required no modification.
• We stripped out the original styles task, and replaced it with this:
  

  This time, we're calling them nested(), cssvariables() and Neat plugins. These are referenced used variables and are added in at the top of our gulp file.

• Our final change is at the end of the gulp file, where we had to adjust the default and watcher tasks to include the additional tasks that we added to our gulp file.

At this stage, do we have a working demo ready for use? Well, not quite, but let's try resizing our demo:

Hmm, what's happened to our content? It doesn't look great, does it? We can easily fix it though; it just requires the addition of some media queries to reorganize how our content is displayed on the screen. Let's dive in and take a look at what is needed to get our demo looking better at smaller sizes.