Professional CSS3

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 ...