We frequently incorporate frameworks such as Bootstrap with our rails application. For going beyond the standard CSS, We require CSS preprocessors. They not only enhance the standard CSS but also provide several other useful functionalities such as nesting of rules,use of variables and mixins.

here are two popular CSS preprocessors.

First is LESS. Bootstrap is written in LESS .

Second is SASS. We'll concentrate on this second CSS preprocessor.

There are two variants or flavours of SASS varying mainly on the delimiter style.

In SASS itself, We use whitespace to nest CSS rules and semicolons are not there. e.g.

.header
  display: block
  background-color: green

  .image
    float: right
    max-width: 70px

This file would produce the following code after compilation.

.header {
  display: block;
  background-color: green;
}

.header .image {
  float: right;
  max-width: 70px;
}

The second variant called SCSS (Sassy CSS) which is almost akin to the standard CSS with which we are nicely acquaintend. See this file:

.header {
  display: block;
  background-color: green;

  .image {
    float: right;
    max-width: 70px;
  }
}

and it would give the same above mentioned standard CSS.

So SCSS bears a close resemblance to the standard CSS. Now ,question arises Which one to use?.

It entirely depends on the discretion of the developer and it doesn't make a difference at all because we all know the final compiled file is going to be the same in both the cases.