I have resisted CSS preprocessors for a while, mostly because I’ve always thought my CSS was simple enough anyway, and I was resistant to learning a new syntax. It seemed like something for the big boys (and girls). However, I now had a small project which used 6 different colours in the CSS. It would be nice if rather than using the hex values everywhere and becoming boss-eyed if I needed to change any of them, I could use names like colour1, colour2 etc.
Not entirely unrelated, as you will see, I have used minified CSS on a couple of sites but found it a pain when I needed to change the CSS, having to copy and paste the contents of my CSS file into an online form and then cutting and pasting the result back into another minimised CSS file. (Although I’m sure there are easier ways if I used it a lot.)
Having read 6 Current Options for CSS Preprocessors I thought I would give CSS-Crush a try as it is PHP-based and it looked simple enough to install and use. A couple of lines of PHP code in each file seemed to be all that was required, and no extra processes required to create the “real” CSS file. The syntax is very similar to CSS’s syntax, so there really wasn’t much to learn.
Not only did it allow me to use variables for the colours, CSS-Crush also adds vendor prefixes where necessary and minifies the CSS to boot. It has several other features too but I have yet to find a use for them.
Finally, I modified the PHP code so that no modifications would be required whether I was running the site on my development system or viewing the live site, and Bob was my uncle.