Using CSS Preprocessors the Easy Way

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.

Prepros - a free preprocessor compiler

What Are Preprocessors?

At this point, I’ve mentioned preprocessors a few times, so it would probably be helpful to define exactly what they are. Preprocessors are just a way to add additional features to CSS (and other languages like Javascript, for that matter). You write your code in the preprocessed language – I’m using Sass here – and then use another tool to compile it down into standard CSS (or whatever language the preprocessor expands).

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.

2 Responses to “Using CSS Preprocessors the Easy Way”

  1. Louise Dade

    What I’ve done in the past in just create a CSS file using PHP (remember to serve with appropriate mime-type header). Then I can use PHP variables for colours, code chunks (“mix-ins”), compiling multiple docs etc. It can’t do nesting, but I’ve never needed anything that complicated.

    While developing the site I use the *.php file in the &60;link rel=”stylesheet”…> tag. No need to keep recompiling the file at all.

    Once I’m happy and the stylesheet is “locked down”, I just save the processed and compiled file as a *.css file which I then use instead of the PHP development file.

    I could leave the PHP file in place, but it adds unnecessarily to the page processing/load time — very important for mobile devices with slower connections.

    Reply
    • David

      That’s pretty darn clever, Louise!

      I’ve heard a few people mention using PHP in their CSS to hack in variables (generally as part of a question directed at a podcast), but they never really explained how they did it. Very cool indeed.

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>