CSS Preprocessors (Sass, LESS, Stylus)

Background of this post
On May 31st, @verekia gave a talk at SFHTML5 meetup about Deep dive into CSS Preprocessors. I heard of Sass and LESS for quite some time, but could not check them out to understand their syntax, features and flows.Our current project also plans to use LESS in v2.0 for CSS coding. So what is CSS preprocessor, why need CSS preprocessor and what are the main difference among these three great tools?

Fortunately after quick google, I found this great article answering all my questions.
http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less-vs-stylus-a-preprocessor-shootout/

What is CSS Preprocessor?
Preprocessors produce CSS that works in all browsers. They don't enhance CSS, but improve your CSS development workflow. They are tools for better CSS development and maintenance. Sass, LESS, and Stylus are the most popular Preprocessors. They are all great.

Why need CSS Preprocessor?
There are many reasons (use cases) for using CSS preprocessors. For large scale web site development, for modular CSS code structure, for efficient CSS coding,  vendor prefixes, 3D Text, Columns (math + variables for div widths) and so on.

Definitions (copied from official website)
Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly, particularly with the help of the Compass style library.

LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (Chrome, Safari, Firefox) and server-side, with Node.js and Rhino.

Stylus, Expressive, dynamic, robust CSS

What are the differences among Sass, LESS & Stylus?
Language
Sass is written in Ruby
Less and Stylus are written in JS


Syntax
Sass and LESS both use the standard CSS syntax.
The syntax for Stylus is much more verbose, accepts other variations

Variables
$mainColor: #0982c1; - Sass
@mainColor: #0982c1; - LESS
mainColor = #0982c1 - Stylus

Nesting
All three preprocessors have the same syntax for nesting selectors
Don't nest too much (4 levels max)

Mixin
Mixins allow the reuse of properties throughout stylesheet.
@mixin mixinA(), @include mixinA() - Sass
.mixinA() - LESS (there is a dot in the front of mixinA)
mixinA() - Stylus

Function
Functions are a similar construct, only they are typically meant to perform an operation and return a value. All three preprocessors have function and built-in color functions. (see below for more info)
Functions like lighten() return a value
Mixins don't return anything but output CSS

Inheritance
Sass & Style @extend .block
LESS Use mixin, no real inheritance as of today

Importing
@import "file.{type}"; - Sass, LESS & Stylus

Color Functions
lighten(color, 10%); /* returns a color 10% lighter than 'color' */
darken(color, 10%);  /* returns a color 10% darker than 'color' */
saturate(color, 10%);   /* returns a color 10% more saturated than 'color' */
desaturate(color, 10%); /* returns a color 10% less saturated than 'color' */
and more functions

Operations
Doing math in CSS is quite useful, and now fully possible from all three preprocessors
body {
  margin: (14px/2);
  top: 50px + 100px;
  right: 100px - 50px;
  left: 10 * 10;
}

Comments
When compiling with a CSS preprocessor, any double-slash comment gets removed (e.g. //comment) and any slash-asterisk comment stays (e.g. /* comment */). So after compiling, we need minify CSS.

What tools are for CSS Preprocessors?

There are a bunch of tools and editors to support CSS preprocessors. Different platforms (Windows, Mac OS, Linux) may have different availability. Here are some options, better to check out their website. Codekit, LiveReload, Less.app, Compass.app, Scout, Crunchapp, SimpLess. From google search result, Codekit, Campass seems to be more popular.

Sass: Sass + Compass + FireSass
LESS: there is no similar Compass for LESS, but twitter bootstrap uses LESS
Stylus: Nib + Stylus


Side notes
OOCSS is heavy for DOM but efficient in terms of CSS file size
LESS client is for development purpose only, never use it in production
Recommended blog for Sass: The Sass Way