Time to Read: ~2 minI 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.