Nesting

Nesting elements in pure CSS are a bad deal. They are not friendly, are hard to read, and make us write and repeat a lot of code. Using a CSS preprocessor, you will provide a more friendly reading to any developer; the code auto explains what the CSS is doing and how the classes inherit from others. Look at the magic:

Using the SASS syntax:

$my-link-color: #FF0000;
$my-link-hover: #00FFFF;

ul {
  margin: 0;

  li {
    float: left;
  }

  a {
    color: $my-link-color;

    &:hover {
      color: $my-link-hover;
    }
  }
}

Using the same in LESS:

@my-link-color: #FF0000;
@my-link-hover: #00FF00;

ul {
  margin: 0;

  li {
    float: left;
  }

  a {
    color: @my-link-color;

    &:hover {
      color: @my-link-hover;
    }
  }
}

One thing you need to know is that the browser does not directly interpret the SASS or LESS syntax. Do you need to convert your code to normal CSS syntax, how could you perform it? In the case of SASS, just type the following command:

$ sass --watch app/sass:public/stylesheets

They both export the same CSS output:

ul { margin: 0; }
ul li { float: left; }
ul a { color: #999; }
ul a:hover { color: #229ed3; }

As you can see, CSS preprocessors provide us a more friendly readability and quick understanding of what the code is doing.