What are the differences between LESS and SASS ?

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

1. 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;
     }

2. We can use properties like mixins and variables in SASS and LESS both.

Differences between SASS & LESS:

SASS	LESS
It is based on Ruby, which needs to be installed in order to run on windows.	Initially based in ruby but ported to JavaScript now. Only needs to have applicable javascript files installed to run.
Reports errors made in syntax.	More precise error reporting with an indication of the location of the error.
Uses Compass extension for implementing mixins.	Uses Preboot.less extension to implement of mixins.
Enables users to create their own functions.	Use JavaScript to manipulate values.
Use “$” for variables and “@” for mixins.	Use “@” for variables.

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;
}