5 Mac Apps That Make CSS Preprocessors Easier to Use

This post is part of a series that revisits some of our readers’ favorite articles from the past that still contain awesome and relevant information that you might find useful. This post was originally published on December 20th, 2011.

If you’re a fan of CSS preprocessors, then you know that despite their usefulness, they can be a bit of a pain to work with at times. Most of them require some sort of Terminal voodoo to compile, which immediately scares off a good portion of potential users.

As always, the Mac development community has come to the rescue with some amazing tools that completely take the effort out of the process. Follow along as we take a look at five great apps that will help you work with LESS, Sass, Stylus and even some non-CSS languages like CoffeeScript and HAML.

What Is a CSS Preprocessor?

A CSS preprocessor is a tool that makes writing CSS easier, more flexible and arguably even more fun. Some purists despise preprocessors and wouldn’t dream of using them, but others, such as the folks at Twitter, have used them as the cornerstone for massive frameworks that rapidly speed up web development.

Typically, a CSS preprocessor adds some interesting functionality to CSS such as variables, mixins, functions, nesting, etc. Some even seek to dramatically redefine the CSS syntax so it’s quicker and easier to write. Developers differ on which preprocessor is the best, but ultimately the output is plain old CSS so which you want to use comes down to a matter of preference. Here are the three current forerunners in this area:

  • LESS - The dynamic stylesheet language
  • Sass - Syntactically Awesome Stylesheets
  • Stylus - Expressive, dynamic, robust CSS

As I mentioned in the introduction, there are several Mac apps that make working with CSS preprocessors much easier and more enjoyable. Let’s take a look.

Five Apps to Process Your Files

LESS.app

LESS.app is a little older and narrower than some of the other options on the market today but it still works perfectly for all your LESS projects. LESS used to require a ruby implementation but these days it uses a .js file to automatically compile your code in the browser.

However, for live sites, you’ll still want to use the resulting CSS in its pure form. This requires you to view the source in the browser and copy/paste the code, which is definitely not ideal. With LESS.app, all of your .less files are automatically compiled and output to a .css file. LESS watches your project folder so as you make changes, everything is kept perfectly in sync.

Do note, though, that while LESS.app is still supported for new versions of LESS.js through 2015, the app itself won’t be getting new features as the developer is focusing his work on CodeKit now.

Price: Free
Supported Languages: LESS

screenshot

LESS.app

Crunch!

While most of the apps on this list are aimed at simply compiling files, the Crunch! AIR app goes one step further and is actually a full blown text editor specifically created for LESS. With it, you can write in LESS with full syntax highlighting, organize your code libraries and of course, automatically compile your .less files to .css files.

The app’s UI is unique and attractive and despite the fact that I’m not typically a fan of AIR apps, I really enjoy using Crunch! to write LESS. Even if you don’t like LESS, it’s a decent free CSS editor!

Price: Free
Supported Languages: LESS

screenshot

Crunch!

LiveReload

LiveReload is a really useful utility that just about every web developer should have, whether you’re working with alternate CSS syntaxes or not. It sits in your menu bar and watches a folder for changes in the files. If a file is updated, it automatically refreshes your browser so you get an up to date look at your page without hitting Command+R every ten seconds.

The beauty is that it goes beyond refreshing the browser and actually processes any code that needs it. For instance, CoffeeScript files are output to JavaScript and Sass files are output to CSS. No word yet on how much it will cost when it finally releases but for now you can enjoy the beta completely free.

Price: $9.99 in the App Store
Supported Languages: CoffeeScript, SASS/SCSS, LESS, Stylus, HAML and Jade

screenshot

LiveReload

Codekit

The developers of the LESS.app above have moved on to a new project, it’s very similar in nature with a lot more “wow” thrown in. Codekit not only watches and compiles your LESS files, it also handles your Sass, Stylus and CoffeeScript files. Like LiveReload, it automatically reloads your browser when any files are updated.

It doesn’t stop there though, it goes one step further and allows you to set up frameworks that you can easily reuse in new projects without copying your code. And that’s still not all! As one final trick it can even optimize all the images in your project so that everything stays nice and speedy. Impressive no?

Price: $25
Supported Languages: CoffeeScript, SASS/SCSS, LESS, and Stylus

screenshot

Codekit

Compass.app

Compass is an open-source CSS Authoring Framework that is built on Sass. It contains a ton of useful tools such as pre-built CSS3 mixins and it’s easy to extend to suit your own needs.

The Compass.app is a Sass compiler specially built for use with the Compass framework. It compiles your code, reloads your browser and works perfectly with all your favorite Compass extensions. And if you’d like an advanced HTML prototyping tool, you can try out their Fire app, which for $14 lets you use Compass’ Sass features to prototype HTML sites.

Price: $10
Supported Languages: Sass

screenshot

Compass.app

Commenter Additions

Our commenters have pointed out a few great apps that should be added to this list. Here they are:

  • SimpLESS – A free and simple LESS compiler.
  • Scout – An open source, free compiler for Compass and Sass.

Conclusion

No matter which CSS preprocessor you favor, the tools above will help you compile your code and perform various other functions with almost zero work on your part. Considering that most of them are completely free, you might as well give these apps a shot and see what you think!

Have you used these or any other similar apps? Leave a comment and let us know!


  • William Johnson

    I’d like to see an article about the pros & cons of frameworks (or preprocessors) in general — for CSS, as this article describes, and also JS libraries such as jQuery etc. Mostly all I see are fans of the various frameworks talking about how great they are, but I’d like to see some balance with discussion of why some people are opposed to them.

  • http://wearekiss.com Christian Engel

    Two things:

    1st – you totally forget our LESS compiler “SimpLESS” ;)
    http://wearekiss.com/simpless

    2nd – CodeKit isn’t free.

    • http://lucaorio.com Luca

      +1
      it’s free until is in beta version

      • Cedric

        Speaking of… the beta expired today, December 20th.

      • Cedric

        My bad, they’ve posted an updated beta.

    • http://www.coroflot.com/joshuajohnson Joshua Johnson

      Thanks, added!

  • Ryan

    Codekit is by far the best I’ve tried so far. Simply amazing :)

    • http://www.webmaster-source.com redwall_hp

      CodeKit looks nice, but it’s Lion-only. I have to track down a cheap copy of Photoshop CS3/CS4 before I can upgrade, which is proving difficult. (I have Creative Suite 1 Standard right now, and Rosetta is no longer included in Lion.)

  • https://twitter.com/nataliav Natalia Ventre

    I use LESS.app with this beautiful dock icon http://fadeyev.net/2010/10/02/less-app-icon/

    CodeKit sounds interesting, but I’m going to wait until the official launch. I like all these apps, but I prefer that Espresso or Coda supported LESS and SASS without any additional app.

  • http://www.themer.me Methemer

    You missed Scout app: http://mhs.github.com/scout-app/
    It’s freee and open-source.
    (for Compass and SASS)

    • http://www.coroflot.com/joshuajohnson Joshua Johnson

      Great find, I added this one as well.

  • http://www.appleumbrella.com Apple Umbrella

    really useful list even helping me a lot. thanks

  • http://www.aeronaves.org Aeronaves

    i AGree in added this one as well. Thanks!

  • Pingback: 5 Mac Apps That Make CSS Preprocessors Easier to Use | Mac.AppStorm | CSS Chops

  • http://liuqvid.ru/blog/vyacheslav-zaicev.html Kathy Simoneavd

    Howdy, i read your blog from time to time and i own a similar one and i was just curious if you get a lot of spam comments? If so how do you prevent it, any plugin or anything you can recommend? I get so much lately it’s driving me insane so any help is very much appreciated.

  • http://allungamentopene.over-blog.com allungamento del pene

    Grazie a, questo post mi da la possibilità di segnalare la cosa ad una mia conoscente che ci teneva considerevolmente.

  • fintan

    Hss is an alternative to sass and less

    http://ncannasse.fr/projects/hss/

  • Namit

    You can also used EDGE. http://getedge.io to live edit Sass / Compass and LESS files as you type (no saving needed).

  • Scott

    CodeKit should be called CrashKit.

  • http://www.stickybeakmedia.com.au John

    I haven’t made use of preprocessors as yet but plan to do so in the near future. However, LiveReload… how did I not hear about this earlier. Fantastic tool and great to know it will work in any of my future workflows regarding preprocessors etc.

  • http://oklai.name Ethan Lai

    There is a new gui for less and sass – koala app http://koala-app.com/, free, open source and cross-platform.It better than winLess and simpless, more beautiful ui and rich options.

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