10 Compiling Tools for LESS and SASS

| Coding Tutorials

sass lessManaging CSS files has been a messy affair until CSS preprocessors.

With pre-processors we don't need to scroll to long CSS files or type same things again and again. Managing the styling of complex sites is now much easier thanks to CSS Preprocessors.

There are several CSS preprocessors, but the two most widely used are Less and Sass.

Getting started with Less is much easier since you can compile .less files on the fly using JavaScript (although that's not recommended for production sites). Less also gained popularity due to its use in the Bootstrap framework.

Sass, on the other hand, feels like a more matured preprocessor and is now supported by both Bootstrap and also the Foundation framework.

There are also few other CSS Preprocessors such as Stylus and DtCSS, etc. but it’s easier to get support and find existing CSS frameworks that support Less and Sass.

CSS Preprocessors help web designers become more efficient, but compiling them is another story. If you are not into using the command line, here's a list of 10 applications that make it simpler to compile Less and Sass files.

#1. CodeKit & Less.app

10-csspreprocessors-01_1.png

CodeKit is more than just a compiler for Less & Sass. It also compiles JavaScript, Markdown and more, plus it continuously monitors for file changes. Modified files are auto compiled and it also automatically reloads the browser. CodeKit is well documented and simple to use making it a great tool to have in your arsenal. If you are only looking for a Less compiler and one that is free, then you could try Less.app, another product created by the same developer.

  • Supports: Less, Sass, Stylus and lot of other things.
  • Price: $ 29 USD with a free trial
  • Platform: Mac OS
  • Website: incident57.com/less/

#2. Prepros App

10-csspreprocessors-10.png

Prepros App offers compilation support for Less, Sass, Stylus, Markdown and more. Some of the other notable features in Prepros are live browser refresh, Image optimization, built-in server, multi-device testing and FTP support for deployment. It also allows the ability to create shareable configuration files which is useful when working in a team.

  • Supports: Less, Sass, Stylus and many others
  • Price: $ 27 USD
  • Platform: Mac OS & Windows
  • Website: alphapixels.com/prepros

#3. Mixture

10-csspreprocessors-08.png

Mixture supports Less, Sass, Stylus, Compass & CoffeeScript. Its features are very similar to Prepros and it also allows us to test in the cloud with Browserstack.com which is a great feature.

  • Supports: Less, Sass, Stylus, Compass
  • Price: $ 39 USD one time or $12.99 USD / month (for online publishing)
  • Platform: Mac OS & Windows
  • Website: mixture.io

#4. LiveReload

10-csspreprocessors-04.png

LiveReload is similar to CodeKit in terms of features such as support for more than Less and Sass, along with auto compiling and browser refresh. The stable version for Mac OS is available for purchase on the Mac App store, and a Windows version is also in works and available for free download.

  • Supports: Less, Sass, Stylus and lots of other things
  • Price: $9.90 USD
  • Platform: Mac OS (Windows version under development)
  • Website: livereload.com

#5. Koala

10-csspreprocessors-09.png

Koala offers many features similar to the paid applications in this list, but is available for free. It supports Less, Sass & Compass and comes with all standard features such as file monitoring for changes, auto compiling & error notification. It also allows you to save project settings which is useful when sharing projects with others.

  • Supports: Less, Sass & Compass
  • Price: Free
  • Platform: Mac OS, Windows & Linux
  • Website: koala-app.com

#6. Compass.app

10-csspreprocessors-05.png

Compass is a CSS authoring tool build on top of Sass. Compass.app is a GUI compilation tool compiling Sass & Compass. Additionally it also comes with a built-in web server & Live Reload support.

  • Supports: Sass (Compass)
  • Price: $ 10 USD
  • Platform: Mac OS, Windows & Linux
  • Website: compass.kkbox.com

#7. Scout

10-csspreprocessors-06.png

Scout is similar to Compass.app. It’s created specifically for compiling Sass/Compass files. If you just looking for a free software to compile your Sass/Compass files, than this is a great option.

#8. Crunch

10-csspreprocessors-03.png

Crunch is a cross platform Adobe Air app for compiling “Less” files. Another bonus point is the built-in full-fledged editor that supports Less’s syntax.

  • Supports: Less
  • Price: Free
  • Platform: Mac OS & Windows
  • Website: crunchapp.net

#9. WinLess

10-csspreprocessors-07.png

A Windows only application, WinLess is simple to setup and easy to use. Along with monitoring the projects files for changes and auto compiling, it allows you to disable auto compiling of specific files in your project.

  • Supports: Less
  • Price: Free
  • Platform: Windows
  • Website: winless.org

#10. SimpLess

10-csspreprocessors-02.png

SimpLess as the name suggests is the simplest tool for compiling “Less” files. Along with basic error notification, file monitoring and auto compiling, it also offers ability to minify your compiled CSS files & automatic CSS prefixing.

Summary

All of the above tools are great if you are just getting started or want simpler, easy-to-use solutions. But if you are looking for more control, then good old fashioned command line programs such as Grunt are the best. Grunt is a JavaScript task runner with which you can only compile, but also perform many other different tasks using plugins.


About the author

Harish is a designer & WordPress developer from Mumbai. He runs a web design agency "Dreams Media" and writes about random stuff on his personal website HarishChouhan.com.