LESS vs. SASS / Language Differences

LESS vs. SASS / Language Differences

Ok, we seem to have a lot of closed questions on this topic due to their
opinionated nature. Let's try to stay away from opinions and highlight the
differences here. I believe this is an important matter because a lot of
people are deciding between the two CSS preprocessors but since everyone
works in different environments, casting an opinion towards some
technology based on your personal situation, doesn't necessarily prove
helpful for others. This is a huge research project to dig into, which is
why I'm asking you kindly to participate. Please keep opinions out and
back your answers up with reference links from credible sources.
Here's an example of what I'm looking for your answers to look like:
FEATURE: INHERITANCE



LESS
In LESS, you don't have actual inheritance. Instead, you can use a mixin
to copy properties from a selector to another.
.base{
/* base styling */
}
.module{
.base;
/* unique styling */
}
CSS
.base{
/* base styling */
}
.module{
/* base styling */
/* unique styling */
}
Conclusion: LESS copies CSS properties from base class.
Reference: http://lesscss.org/#-mixins



SASS
SASS supports extending a CSS rule with @extend which provides inheritance
.base{
/* base styling */
}
.module{
@extend .base;
/* unique styling */
}
CSS
.base, .module{
/* base styling */
}
.module{
/* unique styling */
}
Conclusion: SASS uses selector modification instead of copying CSS
properties.
Reference: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#extend
Note: SASS also has Nested @import which works the same way as mixin in
LESS:
http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#nested-import



Winner: Leave it up to the readers discretion, we only want to highlight
the differences here. Seriously.



Some things to consider when replying:
While writing the above example, I found out how hard it actually is to
compare these two technologies. Is it actually a difference or is it
simply trying to do something you shouldn't. For example, I've seen the
following thrown in as an argument between LESS vs. SASS.
Try to avoid this kind of comparison:
LESS
@margin: 10px;
div {
margin: @margin - 10%; /* = 0px */
}
SASS
$margin: 10px;
div {
margin: $margin - 10%; /* Syntax error: Incompatible units: '%' and
'px' */
}
This doesn't work on either of the technologies. Since the problem is in
what is being tried. The following works on both of the preprocessors and
produces exactly what is beign tried above:
@margin: 10px;
div {
margin: @margin * 0.1; /* = 1px in both preprocessors */
}



Conclusion: This is not a difference in the languages since neither of the
languages support arithmetic operations with parameters of different
types. Whether to produce an error or fail silently, is compiler specific.
Different compilers may have different error handling. Different
environments and IDEs may have different compilers which leads this
information not to be generally useful to compare the languages.



When replying
Please use reference links. If you find someone's answer outdated or
misinformed, please simply state the error and post a reference link so
they can fix or improve their answers. I will also be adding my own
findings. Let's try to make this into a common learning experience.
Thanks for the answers in beforehand.
P.S. Let's try to stay away from any specific development environment.
Surely there are tools and extensions for all the IDEs that support these
technologies but I believe the usability of the information here should be
kept for everyone regardless of their environment.