Generate formatted CSS which would otherwise be tedious to code by hand.

Using variables and a bit of custom logic, you can generate repetitive code snippets with parameters that differ slightly from snippet-to-snippet.

---

Backstory

This tiny tool came about as a result of an issue I had styling a client’s WordPress site.

I needed to target a number of grid elements in batches. The class names differed only by an appended number, but were not necessarily in predictable order - requiring lots of manual fiddling.

Sometimes it’s not worthwhile to write an automation script to handle every edge case possible. Sometimes, all you need is a boost. I wrote CSS Snippet Generator to be that boost.

---

Check out the repo

This project utilizes the prettify.js library by Google and Vim Sunburst Theme by David Leibovic.

---

Try it out!

First, select Generate Snippets to cache modified copies of the original snippet, then Print Snippets to see the generated set.

You can play around with the code by editing on CodePen.

See the Pen CSS Snippet Generator by Nem (@thatchocolateguy) on CodePen.