A question: how often have you come across instances where you have a number of very similar images that share styles, but at the same time need to have individual styles applied? Sound familiar?

I am of course talking about instances such as list items, grid layouts, and the classic social media icons we see littered all over the Internet. We can of course simply write rules to cover each image, but as I am sure you will agree, it's not the smartest approach! Instead, we can use the power of the @each statement to iterate through each item and apply each style using string interpolation.

The @each plugin, by Alexander Madyankin, is one of two ways to incorporate a facility to loop through content; the source for this plugin is available from https://github.com/outpunk/postcss-each. The other plugin, postcss-for (available from https://github.com/antyakushev/postcss-for), takes a different approach—the difference between the two is that the former works on objects...