gistfile1.md

Right now, I don't think any of us use Sass/Scss, Less, or Stylus to the point where switching back and forth isn't possible. They're all basically the same until you get into the super power user features which, none of us have embraced quite yet.

#Sass/Scss

We obviously know what Sass and Scss are. I think the css-compatible format is pretty nice option even though, ascetically, I prefer sass.

body
  background-color:red;

body {
  background-color:red;
}

Compass

The one thing that Sass/Scss really has going for it is Compass's support. I really like things like the sprite map generation compass brings to the table and the community has been strong for a while for both these projects.

#Less

Less is basically scss but for node. Their features are almost identical to the point where in my mind, they're equals. However, since it's a javascript parser and compiler, we have the ability to not only render it on the back-end but, optionally render some on the front end. This also allows us to embed javascript into the less file if the opportunity ever arose. Ruppel mentioned this in the responsive gist I have up. This means we could use document variables in client side rendered less files as well as potentially create helper functions for use in some less.

body {
  background-color:red;
  width: `document.body.clientHeight`;
}

#Stylus

Stylus seems to be the monolithic "I can do it all" choice.

Stylus is node bases as well which means it offers the similar benefits that Less does. It's able to be rendered client side but, does not have the option to utilize inline JavaScript (as far as I can tell). It does however, have an extended logic support for arithmetic, conditionals, and iteration.

It's similar to Sass and Scss in the way that it offers both the bracketed format or the non-bracketed format. It doesn't required a different file extension to decipher; it's intelligent enough to 'just work.' Optionally, it also allows someone to semi-colons and colons which is very "coffeescript-esque." The wow factor here is that all of these formatting options work side-by-side:

fonts = helvetica, arial, sans-serif

body {
  padding: 50px;
  font: 14px/1.4 fonts;
}

Where Stylus seems to shine is it's ability to include transparent mixins as well as in-language functions.

Transparent Mixins

Transparent Mixins allow for mixins to appear as simple as css attributes.

border-radius() {
  -webkit-border-radius: arguments;
  -moz-border-radius: arguments;
  border-radius: arguments;
}

div {
  border-radius: 5px;
}

An alternate format:

border-radius()
  -webkit-border-radius arguments
  -moz-border-radius arguments
  border-radius arguments

div
  border-radius 5px

In-language Functions

sum(nums...)
  n = 0
  n += num for num in nums

body
  foo: sum(1, 2, 3)

output:

body {
  foo: 6;
}

Nib

Stylus also has a supporting library of mixins similar to Compass called Nib. While this is not as feature-complete as compass, it's important to note.