Sass versus LESS for CSS

I just finished a great lynda.com course titled CSS with LESS and Sass, and really enjoyed learning more about these CSS pre-processors. As I went along, I created two pens over at codepen.io to try out the different syntaxes, and took note of a few things along the way.

LESS

LESS was presented first, so a lot of my comments are about how Sass differs from LESS. I found the syntax quite comfortable to read and write.

Sass

I found Sass to be similarly comfortable to read and write, with a few exceptions (below)

Comparison

• The Sass @mixin/@include syntax made for more text in my file, but I found it was easier to decipher what was a mixin. So, this was a toss-up for me.
• For Sass, I found in my testing on Codepen that a @mixin needs to be defined before it was used in the file, unlike Less, which let me define it anywhere.
• Sass @mixin doesn't support $arguments like LESS does, again a minor point.
• Sass contains the if statement, but I found I could mimic that logic with LESS guards. That said, LESS doesn't support conditionals or looping.
• LESS has an interesting concept of pattern matching, which Sass doesn't seem to have (see sample Less pen above)
• Sass has a few more features and functions, for color (grayscale, complement, invert), math (abs, min, max), and has more OOTB formatting options.

Conclusion and References

I think I'll use a bit of both in some real projects, starting with LESS. I did install the Simpless compiler, which seems easy enough to configure to "watch" for changes in my LESS files and convert to CSS. I know that there are equivalent functions for Sass, so I'll see which I prefer. I'm also going to look around for some mixin libraries, in addition to those cited below.

• For Sass/SCSS: Compass / matthieua's Sass Library
• For LESS: LESS Hat / Bootstrap
• Sass and LESS Comparison
• Sass and LESS Library comparisons
• Smashing Magazine: An Introduction to LESS, And Comparison to Sass