Summary

Anyone who has spent time using pre-processors such as SASS will no doubt be familiar with variables and mixins; these make up an integral part of using PostCSS. We've covered a lot of material relating to their use throughout this chapter, so let's take a breather and review what we have learned.

We kicked off with a brief introduction to variables and mixins in SASS, before setting up an example demo in SASS (and Less CSS) as a basis for conversion to PostCSS.

Next up came the start of the transition process to PostCSS. We first looked at adding variable support in, before updating our hover demo to use the new plugin and remove a dependency on using SASS. We then covered some benefits and considerations of using PostCSS, before discovering how a simple tweak in the order of plugins can have a big impact on the end result.

We moved swiftly on with a look at mixins. We covered the install of the postcss-mixins plugin, before using it to update our demo. At this point, we paused for a moment to consider some of the differences between standard processors and PostCSS, and covered how one of the key points to bear in mind is PostCSS's flexibility and power.

We then rounded out the chapter with a look at looping content. We first explored the use of the for statement, before moving on and taking a look at how we can easily style content using the @each function. We then covered its use in a simple demo for styling social media icons. This started in SASS, but finished with the converted results using PostCSS.

Phew, let's move on! Our next stop on this whistlestop tour of mastering PostCSS is a look at nesting, and no, not for our feathered friends, but how we can (dramatically) reduce the content we write, or at least make it easier to read!