Main image for Sass versus LESS for CSS Time to Read: ~2 min

I just finished a great 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 to try out the different syntaxes, and took note of a few things along the way.


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.


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


  • 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.

Subscribe to Wanderfull

Did you enjoy this? Did it help you? Make you laugh? Dare I say, all of the above? If you like my work — my writing, distributed work tips, or drawing, you can get more every week. Subscribe below for my weekly Substack: Wanderfull!