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.

Check out this Pen!

Sass

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

Check out this Pen!

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.

Leave a Reply

Your email address will not be published. Required fields are marked *