So far, we've covered the basics of installing and configuring PostCSS—although there are a few steps involved, it's an easy process to get started with using the processor. To really get to know it though, there is no substitute for using it in anger; it's amazing how much you can automate, with just a little care and planning!
Let's put that to the test and use it to create a couple of simple examples using variables, functions, and mixins. We'll start with creating the original version using SASS, before converting it to use PostCSS plugins. The demos do assume a level of prior knowledge around using SASS, so if you are at all unfamiliar, then you may like to refer to my book, SASS Essentials, available from Packt Publishing.
Note
A word of note: we will make good use of the project folders we created back in Chapter 1, Introducing PostCSS, where src
will be our in-tray, and dest
will contain the compiled code. Make sure you have this open in a window somewhere...