Sass and LESS Preprocessors

Web developers should be familiar with one or both preprocessors

Coke or Pepsi, Mac or PC, Marvel or DC? In every community, there’s a debate over which is better. For web designers or developers, that debate is Sass or Less.

What Are Sass and LESS?

Syntactically Awesome Stylesheets (Sass) and Leaner CSS (LESS) are both CSS preprocessors. They are special stylesheet extensions that make designing easier and more efficient. Both Sass and LESS compile into CSS stylesheets so that browsers can read them, which is a necessary step because modern browsers cannot read .sass or .less file types.

If you plan on being in the world of web development, it’s a good idea to be well-versed in one of the two preprocessors—or both.

When it comes down to it, both are similar. They make writing CSS simpler, more object-oriented, and a more enjoyable experience. Nevertheless, there are a few key differences. 

Sass Is in Ruby While LESS Is in Javascript

Designers reviewing ideas on desktop computer
Shannon Fagan/Getty Images

Sass is based in Ruby and requires a Ruby install. This is no big deal if you have a Mac. However, it is a longer installation if you have a Windows machine.

LESS was constructed in Ruby like Sass, but it has been ported to JavaScript. In order to use LESS, you upload the applicable JavaScript files to your server or compile the CSS sheets through an offline compiler.

To Assign Variables Sass Uses '$' While LESS Uses '@'

two male CSS programmers sitting in front of a laptop and desktop monitor in an office
  Luis Alvarez/Getty Images

Both Sass and LESS use specialized characters to assign variables. This way you don’t have to keep entering specifications; you can just enter the character.

In Sass, it’s the dollar sign ($). In LESS, it’s the at symbol (@). The only downside for LESS is that there are a few existing CSS selectors that already use @, so it may stiffen the learning curve a bit.

Sass Has Compass While LESS Has Preboot

group of web programmers sitting with laptops, one laptop displaying lines of code
  Caiaimage/Gertty Images

Sass and LESS have extensions available to integrate mixins (the ability to store and share CSS declarations throughout a site).

Sass has Compass available for mixins, which includes every option available with updates for future support.

LESS has Preboot.less, LESS Mixins, LESS Elements, gs, and Frameless. LESS’s software support is more fragmented than Sass, resulting in a lot of different options for extensions that may not all function the same way. For your project, you may need all of the listed extensions to get a similar performance to Compass.

LESS Has Better Error Messages Than Sass

compter programmer looking through lines of code
  Razvan Chisu/Getty Images

Both Sass and LESS have been tested for their ability to report errors in syntax. LESS has more accurate error messages in the tests in that it reported the correct location of the error.

Something like this could save a bit of time sweating over a typo.

LESS Has More User-Friendly Documentation Than Sass

web programmer sitting in front of laptop in a coffee shop
  Hero Images/Getty Images 

The LESS documentation is visually appealing and easier to follow for first-time users. The Sass documentation has much more of a knowledge base or wiki setup.​​

This is a fact that could be important to the adoption rates of either Sass or LESS since it is a platform designed for use in website design.