.bam {
//AN_Xml:  @include background(
//AN_Xml:    image-url("foo.png"),
//AN_Xml:    linear-gradient(top left, #333, #0c0),
//AN_Xml:    radial-gradient(#c00, #fff 100px)
//AN_Xml:  );
//AN_Xml:}

Turns into this monster (which is unfortunately what we need for it to work with as good of browser support as we can get):

.bam {
//AN_Xml:  background: url('/foo.png'), -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #333333), color-stop(100%, #00cc00)), -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #cc0000), color-stop(100%, #ffffff));
//AN_Xml:  background: url('/foo.png'), -webkit-linear-gradient(top left, #333333, #00cc00), -webkit-radial-gradient(#cc0000, #ffffff 100px);
//AN_Xml:  background: url('/foo.png'), -moz-linear-gradient(top left, #333333, #00cc00), -moz-radial-gradient(#cc0000, #ffffff 100px);
//AN_Xml:  background: url('/foo.png'), -o-linear-gradient(top left, #333333, #00cc00), -o-radial-gradient(#cc0000, #ffffff 100px);
//AN_Xml:  background: url('/foo.png'), -ms-linear-gradient(top left, #333333, #00cc00), -ms-radial-gradient(#cc0000, #ffffff 100px);
//AN_Xml:  background: url('/foo.png'), linear-gradient(top left, #333333, #00cc00), radial-gradient(#cc0000, #ffffff 100px);
//AN_Xml:}

Winner: SASS

Website Niceitude

LESS has a nicer, more usable website. The SASS documentation isn't awful. It's complete and you can find what you need. But when competing for attention from front end people, LESS has the edge. I don't doubt this plays a large role in LESS currently winning the popularity race. Things may be changing though.

Winner: LESS

The @extend Concept

Say you declare a class which has a bit of styling. Then you want another class which you want to do just about the same thing, only a few additional things. In LESS you'd likely:

.module-b {
//AN_Xml:   .module-a(); /* Copies everything from .module-a down here */
//AN_Xml:   border: 1px solid red;
//AN_Xml:}

That's an "include" essentially. A mixin, in both languages. You could use an include to do that SASS as well, but you're better off using @extend. With @extend, the styles from .module-a aren't just duplicated down in .mobule-b (what could be considered bloat), the selector for .module-a is altered to .module-a, .module-b in the compiled CSS (which is more efficient).

.module-a {
//AN_Xml:   /* A bunch of stuff */
//AN_Xml:}
//AN_Xml:.module-b {
//AN_Xml:   /* Some unique styling */
//AN_Xml:   @extend .module-a;
//AN_Xml:}

Compiles into

.module-a, .module-b {
//AN_Xml:  /* A bunch of stuff */
//AN_Xml:}
//AN_Xml:.module-b {
//AN_Xml:  /* Some unique styling */
//AN_Xml:}

See that? It rewrites selectors, which is way more efficient.

Winner: SASS

Variable Handling

LESS uses @, SASS uses $. The dollar sign has no inherit meaning in CSS, while the @ sign does. It's for things like declaring @keyframes or blocks of @media queries. You could chalk this one up to personal preference and not a big deal, but I think the edge here is for SASS which doesn't confuse standing concepts.

SASS has some weirdness with scope in variables though. If you overwrite a "global" variable "locally", the global variable takes on the local value. This just feels kind of weird.

$color: black;
//AN_Xml:.scoped {
//AN_Xml:  $color: white;
//AN_Xml:  color: $color;
//AN_Xml:}
//AN_Xml:.unscoped {
//AN_Xml:  // LESS = black (global)
//AN_Xml:  // SASS = white (overwritten by local)
//AN_Xml:  color: $color;
//AN_Xml:}

I've heard it can be useful but it's not intuitive, especially if you write JavaScript.

Winner: Tossup

Working with Media Queries

The way most of us started working with @media queries was adding blocks of them at the bottom of your main stylesheet. That works, but it leads to mental disconnect between the original styling and the responsive styles. Like:

.some-class {
//AN_Xml:   /* Default styling */
//AN_Xml:}
//AN_Xml:
//AN_Xml:/* Hundreds of lines of CSS */
//AN_Xml:
//AN_Xml:@media (max-width: 800px) {
//AN_Xml:  .some-class {
//AN_Xml:    /* Responsive styles */
//AN_Xml:  }
//AN_Xml:}

With SASS or LESS, we can bring those styles together through nesting.

.some-class {
//AN_Xml:  /* Default styling */
//AN_Xml:  @media (max-width: 800px) {
//AN_Xml:    /* Responsive styles */
//AN_Xml:  }
//AN_Xml:}

You can get even sexier with SASS. There is a really cool "respond-to" technique (see code by Chris Eppstein, Ben Schwarz, and Jeff Croft) for naming/using breakpoints.

=respond-to($name)
//AN_Xml:
//AN_Xml:  @if $name == small-screen
//AN_Xml:    @media only screen and (min-width: 320px)
//AN_Xml:      @content
//AN_Xml:
//AN_Xml:  @if $name == large-screen
//AN_Xml:    @media only screen and (min-width: 800px)
//AN_Xml:      @content

The you can use them succinctly and semantically:

.column
//AN_Xml:    width: 25%
//AN_Xml:    +respond-to(small-screen)
//AN_Xml:      width: 100%

Note: requires SASS 3.2, which is in alpha, which you can install with gem install sass --pre. I don't think there is any doubt this is a very nice way to work.

Winner: SASS

Math

For the most part, the math is similar, but there are some weirdnesses with how units are handled. For instance, LESS will assume the first unit you use is what you want out, ignoring further units.

div {
//AN_Xml:   width: 100px + 2em; // == 102px (weird)
//AN_Xml:}

In SASS, you get a clear error: Incompatible units: 'em' and 'px'. I guess it's debatable if it's better to error or be wrong, but I'd personally rather have the error. Especially if you're dealing with variables rather than straight units and it's harder to track down.

SASS will also let you perform math on "unknown" units, making it a bit more futureproof should some new unit come along before they are able to update. LESS does not. There is some more weird differences like how SASS handles multiplying values that both have units, but it's esoteric enough to not be worth mentioning.

Winner: Narrowly SASS

Active Development

At the time of this writing...

Number of open issues on LESS: 392
//AN_Xml:Number of open issues on SASS: 84

Pending pull requests on LESS: 86
//AN_Xml:Pending pull requests on SASS: 3

Number of commits in the last month in LESS: 11
//AN_Xml:Number of commits in the last month in SASS: 35

None of that stuff is any definitive proof that one project is more active than the other, but the numbers do seem to always leans toward SASS. As I understand it, both of the leads work on the languages in whatever little free time they have, as they both have other major new projects they are working on.

Winner: Probably SASS

More Reading

//AN_Xml:
• Chris Eppstein: SASS/LESS Comparison
//AN_Xml:
• Jeremy Hixon: An Introduction To LESS, And Comparison To Sass
//AN_Xml:
• Ken Collins: Too LESS? Should You Be Using Sass?
//AN_Xml:
• Johnathan Croom: Sass vs. LESS vs. Stylus: Preprocessor Shootout
//AN_Xml:

SASS vs. LESS is a post from CSS-Tricks

Direct Link to Article — Permalink

A proposal to drop browser vendor prefixes is a post from CSS-Tricks