I’ve been hearing a ton about CSS Preprocessors like LESS and Sass for ages now. They sounded really cool to me, but to get them to work, you need to monkey around in the command prompt every time you need to compile your work. That didn’t sound like a worthwhile trade-off to me. Like most of us, I am occasionally lazy.
The idea was intriguing enough that I spent a fair bit of time learning more about it, reading tutorials and watching screencasts. Most other front-end developers that I see work on Macs, and they use a really cool program called Codekit to automatically compile all their preprocessed work automatically. Naturally, I was jealous. Fortunately, I recently stumbled across a similar program called Prepros that runs on Windows. And the best part is, it’s completely free.
What Are Preprocessors?
The difficulty comes it when it’s time to compile the code into standard CSS. The standard way of doing it involves running a Ruby Gem in the command prompt. It’s doable (I did it a few times when trying out Sass), but it’s more than a little clunky.
Benefits of CSS Preprocessors
CSS Preprocessors are super cool because they add a ton of really great features to the already powerful CSS3. Here is just a brief list of the things they add:
- Variables – you can setup variables for things like colors and re-use them throughout your stylesheet. Not only does this improve your workflow, it also helps keep your colors consistent.
- Compiling multiple documents into a single stylesheet – If you’re like me and prefer to split out your work into multiple stylesheets (perhaps one for typography, one for layout, etc), you can use a preprocessor to recompile them into a single document before deploying them to your site.
- Nesting – Nesting allows you more efficiently select elements by nesting selectors within other selectors
- Mixins – Mixins are little bunches of code that you can reuse over and over again in your code without having to retype it, and you can make it even more powerful by leveraging variables within the mixin. These are especially helpful when dealing with browser prefixes.
What Prepros Does For You
Prepos cuts out all that annoying meddling with the command prompt, and automatically compiles your preprocessed code into normal CSS (and other languages). Not only that, but it does so automatically every time your save your files. It can also automatically refresh your browser, which is quite handy if you work on code in one monitor and have the live site up on another.
Another nice thing is that you can work in whatever your preferred text editor, with Prepros minimized to the systray. Once you start up Prepros and load your site, you don’t need to worry about it again. Just let it run in the background and go about your work.
But what if you’re working on a project that uses a database, such as a WordPress theme? Prepros can help you there too. Not only will it compile your code, but it will also run through a locally installed webserver like XAMPP. I have found, however, that if you’re using a program like XAMPP, you’ll need to install the Chrome auto-refresh plugin. That means that it won’t autorefresh in Firefox or other browsers.
However, the developer has recently released Prepros Pro, which will live refresh anything on any browser. I haven’t tried this myself, but it certainly looks promising. And at only $20.00, it’s priced to move.