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
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
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
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
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
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!