Which CSS Preprocessor Should You Choose?

With the growing number of CSS Preprocessors like LESS, Sass, Turbine, Stylus andSwith CSS to name a few, it's hard to decide which to choose for your project, and which will provide the best CSS authoring.

Rather than focus on evaluating every CSS Preprocessor (that would simply take too long), we will focus on the two most commonly used in the industry:

Sass and LESS. We will provide a comparison on important deciding factors, like installation, features, and similarities & differences, to help you decide which is the best choice.

Before we begin comparing... If you don't know much about CSS Preprocessors, I would recommend you first read this article: Ten Reasons You Should be Using a CSS Preprocessor to understand how they can make your life easier.

Installation
Let's start with the first fundamental step, installation. Both Sass and LESS are built upon different platforms, Sass runs on Ruby while LESS uses a JavaScript library.

Installing Sass: Sass needs Ruby installed to work. This comes pre-installed with Mac, but in Windows you'll need to install before you can start playing with Sass. Further, Sass needs to be installed through the Terminal or Command Prompt.

There are several GUI applications you can use in place of the terminal, like (Scout,compass.app)

To install Sass on the command line, run:

Or with npm (node package manger):

To run Sass from the command line:

Installing LESS: LESS is built on JavaScript, so installation is as easy as linking JavaScript library to your HTML document. There also are a few GUI applications to help compile LESS to CSS, most of which are free and perform very well (e.g. CRUNCH, WinLess andLESS.app).

Alternatively, an easy way to install LESS on the server is with npm (node package manager), like this:

To start the compiler from the command line:

Then, to run LESS from the command line, you can run:

For a more comprehensive list of tools to compile LESS and Sass, look here, it covers a mix of both free and paid apps. There is a handy list of tools to make life a little easier when starting out with LESS or Sass, (25 Essential Sass and Less Tools).

Features
Here are the main features of Sass and LESS:

Similarities and Differences
You can see from the features list above, the difference between Sass and LESS is not huge. Both offer a good range of options to help you write smart and efficient code.

The major differences between LESS and Sass are Variables, Inheritance, Looping Logic and Compass.

Let me explain further.

Variables
Variables are used to pre-assigned values (like colors, margins, padding, etc.) anywhere in your stylesheet. This enables quicker access, but is repetitive to implement, and more importantly, update.

If you use a variable you only have to update in one place.

In LESS, variable names are prefaced with the @ symbol. In Sass, variable names are prefaced with the $ symbol. In both, the value is closed with a semicolon, which is typical for CSS.

Example:

The only issue in this example is Less's use of the @ symbol.

The @ symbol already has assigned meaning in standard CSS, whereas the $ does not.

This can be confusing for beginners unfamiliar with the standards of the language yet.

Mixins, Inheritance & Extend
Mixins in Sass and LESS are defined a bit differently. In Sass we use the @mixin directive while in LESS we define it with class selector.

Here is an example:

Sass/Scss

LESS

Mixins in Sass and LESS are used to include properties from one ruleset to another. In Sass, this method is taken further with Selector Inheritance. The concept is identical, but instead of copying the whole property, Sass will extend or group selectors that have identical properties and values using the @extend directive.

Sass/Scss

Sass/Scss

Logic Statements
In LESS you can write a basic logic statement using a ‘guarded mixin' like this:

The equivalent in Sass, using if statements would be:

Compass
Both Sass and LESS have extensions for faster and easier web development.

Sass: has Compass on it's side, which contains a plethora of Mixins to write CSS3 syntax in less time. Compass extends way beyond just CSS3 Mixins. It has added other useful features like Helpers, Layout, Typography, Reset and even Sprite Images. It also has config.rb file where you can control the CSS output and other utilities.

It is an extremely useful all-in-one package for web development with Sass.

LESS: LESS also has several extensions, but unlike Compass (which has everything in one place), they are separated. Each extension is built by different group of developers. This won't cause problems for seasoned users, but could be troublesome for those starting out.

Here are a few LESS extensions that you might need to include in your project:

• CSS3 Mixins: LESS Elements, Preboot, LESS Mixins.
• Grid: gs, Frameless, Semantic.gs
• Layout: less
• Misc: Twitter Bootstrap

Conclusion
The CSS Preprocessor you choose - Less or Sass - is determined by personal preference.

Depending on the nuances most important to your project, choose the preprocessor that seems best. My personal choice is Sass, simply because of compass and the @ symbol in LESS always bother me. But, I would highly recommend you try both out and decide for yourself.

You can download Less here and download Sass here.

Also, for a more in-depth comparison of the 2 languages, here is some further suggested reading.

• Private vs. Public Cloud Security: Which Should You Choose?
• Should You Build or Buy Your Cloud?
• Which Cloud Storage Do You Use?