What are the differences between LESS and SASS ?

25 Jul, 2021
This article aims to emphasize the key features & differences between the two CSS pre-processors, LESS and SASS. Before diving directly into the difference section, first, let’s talk about these two pre-processors. If you don’t know the basics of this pre-processor, then please refer to LESS & SASS.
LESS: It is a Leaner Style Sheet that is dynamic in nature and efficiently enables customization and reusability. LESS supports cross-browser friendly. It is JavaScript-based and has very precise error reporting along with indicating the exact location of the error. It helps in readability and reusability by letting users create properties like variables and mixins to create dynamic and reusable values throughout the project. It uses Preboot.less to implement mixins.
Example:
LESS
@selector: box; //using variables  .@{selector} {  font-weight: semi-bold;  line-weight: 20px;}
 
CSS Output:
CSS
.box { font-weight: semi-bold; line-weight: 20px;}
SASS: It is a Syntactically Awesome Style Sheet that supports all version compatible extensions to CSS that increases code reusability. It is implemented using Ruby and actively reports errors made in syntax. It uses compass extension to implement mixins and also enables a user to implement their own functions. It lets users create code reusabilities like variables and mixins as well.
Example:
SASS
a {  color: white;    // Nesting  &:hover {    text-decoration: none;  }    :not(&) {    text-decoration: underline;  }}
CSS Output:
CSS
a {  color: white;}a:hover {  text-decoration: none;}:not(a) {  text-decoration: underline;}
 Similarities
They are similar when it comes to syntax.LESS: @color: white; /*@color is a LESS variable*/
#header {
  color: @color;
}SASS: $color: white; /* $color is a SASS variable */
#header {
  color: $color;
}We can use properties like mixins and variables in SASS and LESS both.
They are similar when it comes to syntax.LESS: @color: white; /*@color is a LESS variable*/
#header {
  color: @color;
}SASS: $color: white; /* $color is a SASS variable */
#header {
  color: $color;
}
They are similar when it comes to syntax.
LESS: @color: white; /*@color is a LESS variable*/
#header {
  color: @color;
}
LESS:
 @color: white; /*@color is a LESS variable*/
#header {
  color: @color;
}
SASS: $color: white; /* $color is a SASS variable */
#header {
  color: $color;
}
SASS:
 $color: white; /* $color is a SASS variable */
#header {
  color: $color;
}
We can use properties like mixins and variables in SASS and LESS both.
We can use properties like mixins and variables in SASS and LESS both.
Differences between SASS & LESS:
SASS
LESS
 
Example: For mixins
LESS:
LESS
.margined {  margin-bottom: 1rem;  margin-top: 2rem;}#box h1 {  font: Roboto, sans-serif;  .margined;}.cont a {  color: blue;  .margined;}
CSS Output:
CSS
#box h1 {  font: Roboto, sans-serif;  margin-bottom: 1rem;  margin-top: 2rem;}.cont a {  color: blue;  margin-bottom: 1rem;  margin-top: 2rem;}
SASS:
SASS
@mixin margined {  margin-bottom: 1rem;  margin-top: 2rem;}#box h1 {  @include margined;  font: Roboto, sans-serif;}.cont a {  @include margined;  color: blue;}
CSS Output:
CSS
#box h1 {  margin-bottom: 1rem;  margin-top: 2rem;  font: Roboto, sans-serif;}.cont a {  margin-bottom: 1rem;  margin-top: 2rem;  color: blue;}
CSS-Questions
Picked
SASS
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.