MENU


Sass vs Less Differences

Sass Less
The command-line version is installed through Ruby. The command-line version is installed through NodeJS.
& is used to denote variables.
@ is used to denote directives. 		@ is used to denote variables.
There are no directives.
Variables cannot be declared after being used. Variables can be declared after being used. (Variable Hoisting)
Variables can be interpolated in comments. Variables cannot be interpolated in comments.
Property names can be extracted and nested. Property names cannot be extracted and nested.
@at-root brings a selector out to the document root. No equivalent construct.
Strings can be concatenated with +. Strings cannot be concatenated with +.
One has to use variable interpolation.
!global and !default for variables. No equivalent constructs.
A mixin is declared with @mixin.
Its CSS is not created unless the mixin is applied/called. 		A mixin may look like ordinary selector-rules.
Its CSS is created automatically unless ( ) are present in the declaration.
During extension, a placeholder selector, which is prefixed with %, may be used to suppress CSS generation. During extension, the 'all' keyword last in an extend argument may be used tell Less to match that selector as part of another selector.
No functions support for the HSV color scheme, luma, luminance, trigonometry and svg-gradient. Functions support the HSV color scheme, luma, luminance, trigonometry and svg-gradient.
A ruleset cannot be stored in a variable. A variable may store a detached ruleset.
Uses explicit directives for flow control. Uses mixins and guards for flow control.
Custom functions are defined with the @function directive. Custom functions are defined with parametric mixins.
Maps can be defined. No equivalent constructs.
No internal support for Javascript. Javascript may be executed with the backtick operator `.
The scripting language can be further extended with Compass. No extension is known.