Preprocessor – why should you use them?

A preprocessor is a program that will build CSS code from other syntax similar or almost identical to CSS. The main advantages of preprocessors are as follows:

• Code nesting
• Ability of using variables
• Ability of creating mixins
• Ability of using mathematical/logical operations
• Ability of using loops and conditions
• Joining of multiple files

Nesting elements in preprocessors

Preprocessors give you the advantage of building code with nesting of declarations. In simple CSS, you have to write the following:

.class {
  property: value;
}
.class .insideClass {
  property: value;
}

In the preprocessor, you just need to write the following:

.class {
  property: value;

  .insideClass {
    property: value;
  }
}

Or in SASS with the following indentation:

.class
  property: value

  .insideClass
    property: value

And it will simply compile to code:

.class {
  property: value;
}
.class .insideClass {
  property: value;
}

The proper usage of nesting will give you the best results. You need to know that good CSS code.

Using variables to parametrize your CSS code

In good CSS code, there is no possibility to use variables in all browsers. Sometimes you are using same value in the few places, but when you have change requests from client/project manager/account manager, you just immediately need to change some colors/margins, and so on. In CSS, usage of variables is not supported in old versions of Internet Explorer. Usage of variables is possible with CSS preprocessors.

Using mixins in preprocessors

In classic programming language, you can use functions to execute some math operations or do something else like displaying text. In CSS, you haven't got this feature, but in preprocessors you can create mixins. For example, you need prefixes for border-radius (old IE, Opera versions):

-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;

You can create a mixin (in SASS):

@mixin borderRadius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

And then invoke it:

@include borderRadius(20px)

Mathematical operations

In preprocessors, you can use math operations like the following:

• Addition
• Subtraction
• Multiplying
• Dividing

As an example, we can create simple grid system. You will need, for example, 10 columns with a resolution of 1,000 pixels:

$wrapperWidth: 1000px;
$columnsNumber: 10;
$innerPadding: 10px;

$widthOfColumn = $wrapperWidth / $columnsNumber;

.wrapper {
  width: $wrapperWidth;
}

.column {
  width: $widthOfColumn;
  padding: 0 10px;
}

Logic operations and loops

Without a logical operator's comparison of operations and loops, you cannot create a good program in classic programming language. The same applies to preprocessors. You need them to automatize the creation of classes/mixins, and so on. The following is the list of possible operators and loops.

The list of comparison operators is as follows:

• <: less than
• >: greater than
• ==: equal to
• !=: not equal to
• <=: less or equal than
• >=: greater or equal than

The list of logical operators is as follows:

• and
• or
• not

The list of loops is as follows:

• if
• for
• each
• while

Joining of multiple files

In classic CSS, you can import files into one CSS document. But in a browser, it still makes additional requests to the server. So, let's say when you have a file with the following content:

@import "typography.css"
@import "blocks.css"
@import "main.css"
@import "single.css"

It will generate four additional requests to CSS files. With a preprocessor, each @import makes a merging for you, and in this place you will have the content of the mentioned file. So, finally, you have four files in one.

Less – a short introduction

Less is a preprocessor mainly used in a Bootstrap framework. It has all the features of a preprocessor (mixins, math, nesting, and variables).

One of the good features is the quick invoking of declared mixins. For example, you have created a class:

.text-settings {
  font-size: 12px;
  font-family: Arial;
  text-align: center;
}

Then you can add declared properties with its values in other elements declared in your less file (it works like a mixin):

p {
  .text-settings;
  color: red;
}

You will finally get the following:

p {
  font-size: 12px;
  font-family: Arial;
  text-align: center;
  color: red;
}

CSS with Stylus

Stylus has two versions of code (like SASS): one with braces/semicolons and the other without braces/semicolons. Additionally (over SASS), you can omit colons. If it continues to be developed and still retains its present features, it's going to be the biggest competitor for SASS.

SASS – the most mature preprocessor

SASS stands for Syntactically Awesome Stylesheets. It first appeared in 2006 and was mainly connected to Ruby on Rails (RoR) projects. Agile methodology used in RoR had an influence on frontend development. This is currently the best known CSS preprocessor used in the Foundation framework with the combination of Compass. A new version of the Twitter Bootstrap (fourth version) framework is going to be based on SASS too.

In SASS, you can write code in a CSS-like version called SCSS. This version of code looks pretty similar to CSS syntax:

a {
  color: #000;

  &:hover {
    color: #f00;
  }
}

The second version of code is SASS. It uses indentations and is the same as the preceding code, but written in SASS:

a 
  color: #000;
  
  &:hover 
         color: #f00;

You can see bigger differences in mixins. To invoke a mixin in SCSS, write the following:

@include nameOfMixin()

To invoke a mixin in SASS, write the following:

+nameOfMixin()

As you can see, SASS is a shorter version than SCSS. Because of the shortcuts and the automatization processes it is highly recommend to use SASS over SCSS—write Less—get more.

Personally I'm using SASS. Why? The first reason is its structure. It looks very similar to Jade (an HTML preprocessor). Both of them are based on indentation and it is easy stylize Jade code. The second reason is the shorter versions of functions (especially mixins). And the third reason is its readability. Sometimes, when your code is bigger, the nesting in SCSS looks like a big mess. If you want, for example, to change a nested class to be in any other element, you have to change your {}. In SASS, you are just dealing with indentation.

Short comparison

I've been working a lot with Less and SASS. Why did I finally chose SASS? Because of the following reasons:

• It's a mature preprocessor
• It has very good math operations
• It has extensions (Compass, Bourbon)

Usage of Compass is recommended because:

• It has a collection of modern mixins
• It creates sprites

Most preprocessors have the same options and the reason you will choose one is your own preferences. In this book, I will be using SASS and Compass. In the following table, you can find a short comparison:

	Less	Stylus	SASS
Variables	Yes	Yes	Yes
Nesting	Yes	Yes	Yes
Mixins	Yes	Yes	Yes
Math	Yes	Yes	Yes
Additional collections of mixins	No	No	Yes (Compass/Bourbon)