Less Vs Sass? Who is the winner?

Now a days, you will find many CSS Frameworks available like Less, Sass, Emastic, 960.gs, BluePrint etc. Each stylesheet language is good in the right context, and they have a lot of common features such as:

  • Nesting capabilities
  • Mixins and parametric mixins
  • Namespaces
  • Color functions
  • JavaScript evaluations

From Less (stylesheet language) Wikipedia:

Comparison with Sass

Both Sass and Less are CSS preprocessors, which allow writing clean CSS in a programming construct instead of static rules.

As of Less 1.4, Less supports nested, inherited rules via the &:extends and @extends pseudo-selector. Prior to this, a main difference between Less and other preprocessors like Sass was the lack of an @extends directive to support inheritance of rules across classes, leading to cleaner CSS with less duplication.

LESS is inspired by Sass. Sass was designed to both simplify and extend CSS, so things like curly braces were removed from the syntax. Less was designed to be as close to CSS as possible, so the syntax is identical to existing CSS code. As a result, existing CSS can be used as valid Less code.

The newer versions of Sass also introduced a CSS-like syntax called SCSS (Sassy CSS).

For more syntax comparisons, see https://gist.github.com/674726

LESS VS SASS

The main difference between Less and Sass is the way in which they are processed. Here are some key points:

LESS

SASS

1. Installation Less is a JavaScript library, so it is processed client-side. Sass runs on Ruby and is processed server-side.
 2. Variable In less, variable names are defined with the @ symbol.
Example:

@color: black;
#less-syntax {
    color: @color;
}
In Sass, variable names are defined with the $ symbol.
Example:

$color: black;
#sass-syntax {
     color: $color;
}
3. Mixins In Less, we define it with class selector.
Example:

.border-radius(@radius) {
    border: 1px solid red;
    border-radius: @radius;
}
#less-syntax {
    .border-radius(3px);
}
In Sass we use the @mixin directive.
Example:

@mixin border-radius($radius) {
    border: 1px solid red;
    border-radius: $radius;
}
#sass-syntax {
    @include border-radius(3px);
}
 4. Extending
.bordered {
    border: 1px solid green;
} 

#less-syntax { 
    &:extend(.bordered);
    border-bottom: 2px;
}
.bordered { 
    border: 1px solid green;
} 

#sass-syntax { 
    @extend .bordered; 
    border-bottom: 2px; 
}
 5. Output formatting Less has three output formats:

  1. Normal
  2. Compressed
  3. YUI-compressed
Sass has four output formats:

  1. Nested
  2. Compact
  3. Compressed
  4. Expanded
 6. Namespaces Less provides a feature that Sass does not:

#bundle () {
    .red {
        background-color: red;
    }
    .green {
        background-color: green;
    }
} 
.foo { 
    #bundle > .red;
}

Generates:

.foo {
    background-color: red;
}
The sass developers looked at this feature and decided that adding it would destroy the quality and unexpected interconnection.
 7. Comments Less and Sass both support C-style (/* */) and C++ Style comments (//).
 8. Error Notification Less notification is well-presented and it also appears to be more accurate. Sass is slightly off with where the error is.

 

FYI: Why people say Sass is better than Less:

  • Sass has amazing Compass framework which holds CSS3 support up to date.
  • Sass provides the @extend feature allowing you to extend a class from another one.
  • Media queries are handled in a better and more advanced manners than others.
  • Development of Sass is somewhat more active.

Conclusion

Both preprocessor – Less or Sass – has advantages and disadvantages. Which preprocessor you decide to go with is depends on your personal choice. Be it Sass or Less, as long as they are productive and fulfill the needs, then that is the winner.


Lastly, if you have something in mind about this difference, feel free to share it in the comments box below.

About Mohit Bhansali

A hyperactive mind with a passion for getting acquainted with the latest technology.

Comments

  1. Deepika Gupta says:

    Awesome comparison Mohit. I have recently started with SASS and Compass, and I think I did the right thing.

Speak Your Mind

*