Crunch: a LESS/CSS Editor and Compiler

Sometimes over here at Web.AppStorm we look at apps that are built using Adobe AIR, a cross-platform solution that allows you to easily create and install apps that will work on Windows, OS X, and Linux. Crunch is a CSS editor/compiler built using AIR, and is definitely worth a look.

Built to take advantage of the CSS-supplement LESS (which we’ll take a look at in the review), is Crunch a worthwhile program or a worthless novelty? Let’s take a look.

Getting Started with LESS

LESS is a coding language and JavaScript plugin that can be used as a supplement to CSS. It uses a lot of the same language (as a matter of fact, LESS is valid CSS) but also adds variables and some other cool features that make writing CSS easier.

For those not in the know, CSS is, in a nutshell, the lines of code that make your websites look like something other than size-16 Times New Roman with black text and blue links. It’s a large part of the web today, and with CSS3 designers are able to do some pretty cool things.

My favorite feature of LESS is the ability to define something once and refer to it later. An example of this can be seen below:

An example of less; notice that the @color is used instead of the value.

An example of less; notice that the @color is used instead of the value.

What if your CMS (content management system) doesn’t support LESS? Well, that’s where Crunch comes in.

Writing LESS (or CSS)

Any code editor worth its salt has syntax highlighting, and Crunch is no exception. For someone that’s new to writing code–such as myself– Crunch has all of the features that you would need. For those wishing to do more than write CSS or with advanced requirements, you’re better off looking elsewhere.

Crunch keeps things fairly simple. You can create, open, and save CSS files, or do the same and also ‘crunch’ LESS files. What is ‘crunching’, you ask? Besides being this app’s raison d’être, crunching is what will allow you to take advantage of everything that LESS has to offer, today.

Taking LESS and Spitting Out CSS

See, there’s a reason why LESS is a language and a JavaScript plugin: your browser doesn’t know what to do with LESS when it first encounters the language. You can write everything properly and you’ll still end up with a broken site.

Let’s just say that you don’t want to install LESS on your site (or, you are unable to install LESS on your site) but you want to make writing your CSS that much easier. This is where Crunch comes in.

This is the CSS output from the above example. Note that it includes a comment about Crunch in the output.

This is the CSS output from the above example. Note that it includes a comment about Crunch in the output.

Crunch takes your LESS, digests it, and spits out valid CSS. All of the sudden your file that ended with .less now ends with .css and, upon inspecting the code, you’ll find that everything is written with typical CSS syntax instead of LESS’ own unique language. This way you’re able to write your CSS with ease and still have your website get presented the way that you would like it to be.

Look and Feel

Crunch is a pleasure to use. Everything is easy to digest (pun intended) and visually appealing without feeling cluttered or overwhelming. It feels at home both on Windows and OS X (though, perhaps a bit more on OS X) and is genuinely fun to use.

Orange isn't used often enough. Blue gets all of the love.

Orange isn't used often enough. Blue gets all of the love.

I enjoyed the use of orange, as it’s rarely found in applications these days. With Crunch I have found an app that feels as though it were designed to be used both as a serious tool and as a plaything, leading to a productive–but enjoyable–work environment.

In short: I like it.


Crunch is an application that does one thing well: allowing you to take advantage of LESS today instead of tomorrow. It performs its task admirably, but it isn’t for everyone.

As I said above, if you want to write something besides LESS/CSS, you’ll want to look elsewhere. There are plenty of native apps that allow you to do write with other programming languages, but none of them are able to work with LESS the way that Crunch does. The developers saw a niche and have created an app to appeal to that niche.


I enjoy Crunch. It’s an app that does what it’s meant to and does it well. I enjoy the interface for its ability to both get out of the way and its aesthetic quality. It doesn’t have all of the features of a full-fledged code editor, but it doesn’t aim to either.

I’ll admit that being an AIR app initially gave me some pause. I’m wary about installing most Adobe products on my Mac, but I was willing to give AIR a go simply to use Crunch. It’s been worth the install, and I often forget that it isn’t technically a native app, which is the highest praise that I can give to the app.

For the price of absolutely nothing you can get a perfectly capable CSS editor and save some time, whether you’re redesigning an existing site or creating a new one. Download it today.


Crunch is an editor that allows you to write with LESS, a simple and powerful supplement to CSS.

  • Crunch  | 
  • Free  | 
  • Matthew Dean and Matt Kump