38

I'm trying to do research on these css preprocessors.

Are there any advantages of using sass over less as a css preprocessor? Factors that i'm looking for include community size, software project maturity, etc.

I know there was another question related to this, but it was not constructively written and closed.

Update

Looks like bootstrap now has gone over to use Sass

3 Answers 3

33

Chris Coyier has an awesome rundown of SASS vs LESS over at css-tricks.com. It's definitely worth the read.

As for some of your specific questions:

Community

I work entirely with SASS/Compass, so I'm not intimately familiar with LESS's community, but nor have I really needed SASS's community. Their documentation is fantastic and has solved any problems I've run into thus far.

For what it's worth, though, here are the SASS vs LESS statistics that Chris has in his post, which I've updated for current numbers:

Number of open issues on LESS: 121
Number of open issues on Sass: 87

Pending pull requests on LESS: 13
Pending pull requests on Sass: 8

Number of commits in the last month in LESS: 49
Number of commits in the last month in Sass: 7

To note, these numbers were roughly flip-flopped as of Chris' writing in May, 2012. This says to me that they're both pretty equal with regards to development activity.

Maturity

Technically speaking, Sass is older. It came out in 2007, while LESS came out in 2009. That said, the comparisons I've seen put both of them at pretty much the same level of "maturity" in regards to features and whatnot.

Both also have frameworks that bring more tools to them. LESS has Less Framework, and Centage (additionally, the Twitter Bootstrap is built with LESS). Sass has Compass, Gravity, and Susy. Both probably have more, if you dig for them, but those are some of the first that come up when you search.

So are there any real differences?

When it comes to writing it, not really. If you use the CSS-like SCSS syntax in Sass (instead of the more Python-like SASS syntax), you have only the typical minor syntax differences (@ vs $), but for the most part, they're basically the same.

The two biggest differences in coding I found were a) how they handle units when doing math, and b) how they handled inheritance. When given something like 20px + 2em, LESS will drop the second unit and assume you mean the first (yeilding 22px), while Sass will throw an error (basically, type mismatch). With inheritance, LESS treats it like a mixin (I can't really explain it well, so see the inhertance section of this Tuts+ article for details).

Whether one is superior over the other kind of depends on how you'd prefer it to handle things.

The other biggest difference I know of is how and where each one compiles by default. Sass uses Ruby and compiles on the server, allowing you to store and send the compiled CSS file to the client. LESS, on the other hand, defaults to using the less.js script to compile the CSS on the fly. However, with the use of Node.js, LESS can compile on the server side in the same way that Sass does.

Which One?

So, if they're basically the same, which one should you use? Well, unless you really love the Python-like SASS syntax, or really think that client-side compilation is the way to go, or you greatly prefer one's inheritance calling over the other, it's going to matter more whether you prefer to have (or already have) Ruby or Node.js installed.

7
  • 2
    +1 Nice summary. Unless its been added recently, LESS also doesn't have anything comparable to Sass's @extend
    – steveax
    Commented Feb 5, 2013 at 5:09
  • LESS's development seems to have greatly increased of late. They are adding an @extend syntax in 1.5.0 (:extend() syntax). They are also adding Source Maps among other things. Commented Sep 13, 2013 at 1:13
  • WraithKenny - That still technically puts them behind Sass. Standardized source maps are in the testing branches right now (and they've had non-standard "source maps" with --debug-info and line comments for Firebug and Chrome a few versions back for some time now, prior to the standard ones coming out), and placeholders (basically, @extend without actually writing the class from which to extend) are in the latest version.
    – Shauna
    Commented Sep 13, 2013 at 12:53
  • @Shauna not sure how they're "technically" behind... LESS has had "non-standard 'source-maps'" since last year, and already has standard source maps in the latest stable build, unlike Sass currently.
    – subhaze
    Commented Dec 18, 2013 at 2:25
  • @subhaze - At the time of the previous comments, LESS did not have the extend syntax, so it was still behind in that aspect. Additionally, Sass has added the "placeholders" feature in recent stable builds. That said, I'm not going to make addenda every couple of months comparing the most cutting edge features of each set. As I said in my answer, they're both pretty much the same, and when one adds a feature the other doesn't have, the other is usually not far behind.
    – Shauna
    Commented Dec 18, 2013 at 14:04
6

I do believe that your choice may depend at least a tiny bit on what you're doing or using; I work primarily with Rails and it supports Sass for its CSS to the point that it is actively included upon creating a new project. If you want to use something like the ever-popular Bootstrap, which utilizes Less by default, you don't have to fear, because there are many popular gems such as bootstrap-sass which enable you to use it in your project.

This is strictly anecdotal, but every impression I have personally had is that Sass has a larger community and more support, and quite frankly the official documentation for Sass is much more detailed and lengthy than that of Less (increasing the font size and padding for everything does not a longer piece of text make). If you want to go into specifics, although I am not entirely familiar with Less, based strictly on looking at both languages, Sass is the only one with selector inheritance. I am sure that there are other difference which people can elaborate on.

In the end, everyone has their preferences and if you find that one suits you better than the other, you should by all means use it if it can do what you need it to. However, in my time using Sass, I have certainly enjoyed its clarity and effectiveness, particularly considering that I am in the Rails domain.

1
  • Agreed, if you are already on Ruby, SASS makes sense. I'm more of a JavaScript guy so LESS for me! Commented Sep 13, 2013 at 1:16
5

I am not sure if Less has anything comparable, but one of the main advantages of Sass is the Compass library, which provides you with many common CSS idioms, standard hacks needed for older browsers and CSS3 functionalities without the need of browser prefixing, not to mention automatic generation of CSS for sprite images.

Another advantage - at least for me - is that Sass allows a Python-like syntax that I find much more readable.

3
  • Comparable to Compass? I don't know, but they have Twitter's Bootstrap. Commented Sep 13, 2013 at 1:14
  • Well, they are different beasts. Bootstrap is a set of conventions and widgets, while Compass os a collection of reusable mixins
    – Andrea
    Commented Sep 13, 2013 at 9:08
  • Also, Bootstrap is available in Sass.
    – Shauna
    Commented Sep 13, 2013 at 12:54

Not the answer you're looking for? Browse other questions tagged or ask your own question.