“Which CSS preprocessor language should I choose?”

is a hot topic lately. In online debate this questions appears almost every day.

 

A CSS preprocessor is a scripting language that extends CSS and then compiles it into regular CSS.

By switching from CSS to a preprocessor can help streamline your development process. One of the biggest advantage is probably not having to repeat yourself. Here are some other advantages:

  1. Cleaner code with reusable pieces and variables
  2. Saves you time
  3. Easier to maintain code with snippets and libraries
  4. Calculations and logic
  5. More organized and easy to setup

.

CSS processor Logo Website
SASS

sass-lang.com
LESS

lesscss.org
STYLUS

learnboost.github.io/stylus

Source: 2015 Survey from ashleynolan.co.uk Disclaimer: these are just responses from a small portion of developers.

Migrating to another preprocessor might be an important decision, take the time to see a comparison between the preprocessors, you might want to stay with your current one or change the preprocessor you want to migrate to.

Online and offline converters
to Less to Sass to Stylus
from Less Less to Sass (guide) less2sass (ruby gem) less2stylus (GitHub)
from Sass grunt-refactor (GitHub) SassMeister (Sass ⇄ SCSS) Sass2Stylus Ruby Sass2stylus (GitHub)
from Stylus Stylus to Sass (guide)
from CSS BeautifyTools toki-woki.net/p/least (indent only) fishsticss.com (indent and color vars only) grunt-refactor (GitHub) Lessify BeautifyTools toki-woki.net/p/least (indent only) fishsticss.com (indent and color vars only) css2compass css2scss BeautifyTools toki-woki.net/p/least (indent only)

 

Here is how to install Sass and LESS:

SASS

On newer versions of Linux and OSX, Ruby already comes preinstalled. You can install Sass with the following command. sudo gem install sass

There are also other libraries, such as libSass that brings Sass to NodeJS.

On Windows, you will need to first install Ruby. If you are on a Mac, Ruby already comes preinstalled.

  1. Open up your terminal or command prompt
  2. Install Sass sudo gem install sass

LESS

LESS is written in javascript so you will need NodeJS to run it.

  1. On Linux and Mac, you can install it using the following command. npm install -g less
  2. You can then use this command to compile to CSS. lessc styles.less styles.css

On Windows you will need to install the NodeJS installer.

  1. Open up your command prompt
  2. Run npm install less
  3. You can then use this command to compile to CSS. lessc styles.less styles.css