LESS, Sass, Stylus - CSS Preprocessors

Sun 27 October 2013

css_preprocessors

A few months ago I started using CSS preprocessors to write CSS files. When I heard about them I just wanted to see how they work and what they can do but after some days I could see how useful they are. I started with LESS and after getting a good understanding how they work I said that knowing how to use Sass will be nice as well. These days I am using both. Just try them and see which one you prefer. There is also Stylus but to be honest I didn't used/try it.

If you are thinking to start using CSS preprocessors, here are some links and apps which can help you, as well:

LESS home webpage has everything you need to start and to read about. LESS syntax is similar to CSS.

Sass home webpageSass Basics, Sass reference contains a lot of useful stuff in the case you want to begin with Sass.

Stylus - the  homepage has the necessary documentation.

After you will start reading more about Sass you will notice that some people are using a syntax and some people prefer a different syntax. Yes, both of them are supported, one is based on indentations and { } ; are optional and the other one is more similar to standard CSS. Check Sass vs. SCSS: Which Syntax is Better? to see how they differ.

As I mentioned above you should decide which one you use, but here is an article if you want to have a look: Sass vs LESS.

In order to make preprocessing of Sass and LESS files easier there are a handful of apps to help you. Here are some of them:

  • less.app - free (support for LESS files)
  • SimpLESS - free (for LESS files, CSS Minification, Cross-browser CCS Prefix using prefixr.com)
  • Crunch - free (support for Less files)
  • Scout - free (Sass and Compass files)
  • Koala - free (Less, Sass, Compass and CoffeeScript compilation)
  • Prepos - free + paid (the free version compiles LESS, Sass, SCSS, Stylus, Jade, Slim, Coffeescript, LiveScript, Haml, Markdown, image optimization, js concatenation, browser refresh, built-in http server). Paid option has 1-Click FTP deployment, Team collaboration, ...)
  • LiveReload - free + paid (Sass,  Compass, LESS, Stylus, CoffeeScript, IcedCoffeeScript, Jade, HAML, SLIM, browser refresh)
  • Compass - free + paid (for Sass and Compass, built-in web server, livereload support)
  • CodeKit - paid (process Less, Sass, Stylus, Jade, Haml, Slim, CoffeeScript, Javascript, Compass files, minification, optimize images, live browser reload)
  • Hammer - paid (SASS  - with Bourbon, CoffeeScript, HAML and Markdown)
  • Fire.app - paid (Sass, Compass, CoffeScript, browser refresh)
  • Mixture - paid (Sass, LESS, Stylus, CoffeeScript and Compass are supported. Images are optimised and built-in support for concatenation is also present.)

If you don't like to have a GUI app you can also use a command line tool, for example: guard-livereload.