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.

Uses

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.

Conclusion

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.


Summary

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
8
  • Rich S.

    Awesome article! I heard of Less.js a few times, but never really gave it the time of day until now. Thank you for this. You have certainly saved me some valuable time in the future.

    Also: Your Crunch link is broken. Here is what it should be: http://crunchapp.net/

    • http://techinch.com/ Matthew Guay

      Ah, thanks for the heads-up … I just got the link fixed. Sorry about that!

  • http://twitter.com/felipewagnr Felipe

    Nice app i’m using to minimize my css’s and write a cleaner code!

    It has a very sleek interface, and it is very confortable.

    Just a note, in your example you forgot to put the “#” in the color.

  • http://twitter.com/matthewdl Matthew

    Hey, thanks for your review of Crunch! I’m one of the Matts of the Matt & Matt team. Happy to see people using the app!

  • Charbel

    Sweet. I like AIR Apps, there’re so light weight :)

    Thanks for this.

  • chaicup

    Hi There,

    A very good review and an awesome article!

    Do you happen to know about CodeKit (http://incident57.com/codekit/)?
    It’s a native app, does the same for LESS, but also SASS and CoffeeScript.

    cheers!

  • Peter Schermers

    A great app when compared to less.app, which for some reason was just showing errors when using mixins from imported .less-files (yes, I’m using Bootstrap). The only thing I’m still missing though is the option to let Crunch AUTOMATICALLY crunch my .less-files to .css-files. Right now I always have to press the ‘Crunch’ button after every little change in my .less-file. (This actually DOES work in the Less-app ;-).

    But nevertheless a great new app!!! Thanks!

  • Khuram Malik

    Thanks for the detailed review. I am about to test this soon as i’m using bootstrap.less with less.js for my mockup screens (performance is quite slow) so it’ll be great to be able to spit out css.

    I’ve noticed in the bootstrap.less that there are many imports taking place, do you know if this app, will ONLY output css code that is being called in the html markup, or will it output everything?

    The reason i ask is that im only calling a few classes so dont need the entire bootstrap css framework. Rather than having to manually strip out the unneeded css, it would be good if there is a tool that can do it for you.

    Something like that would be great for code maintainability and especially site rendering performance.

    I’ll check the app out shortly anyhow. It was a choice between this and WinLess but you have me convinced on this app.

    Thanks again.

  • Dan Excel

    Crunch does not have a Linux version

  • http://lesscsstutorial.com lesscss

    Beautifull tutorial Adam, very good.Looks awesome,Great work,Great Examples.

  • http://lesscsstutorial.com,www.w3tec.com lesscss

    good work,good Examples.

  • Mac

    http://kineticwing.com

    Less IDE : editor + Complier ( Inbuilt)

    Cross Platform

    Enjoy

  • Andrew Khan

    Or you could just use Sublime.

theatre-aglow
theatre-aglow
theatre-aglow
theatre-aglow