How to use Nested in LESS CSS

LESS best feature is its support for “Nested Rules”.Where in normal CSS you need to make CSS rules with long selectors but in the LESS CSS you can simply nest selectors inside other selectors.This create inheritance and make style sheet  shorter.

Example of Nest Code:

.header{
  width:960px;
  height:auto;
  font-family:arial;
  font-size:14px;
  color:#333;
  .logo{
    float:left;
    text-align:left;
    .span{
      color:#C00;
      font-size:11px;
    }
  }
}

when this code is compiled then the code will see like that.

After the Compiled of Nest Code:

.header {
  width: 960px;
  height: auto;
  font-family: arial;
  font-size: 14px;
  color: #333;
}
.header .logo {
  float: left;
  text-align: left;
}
.header .logo .span {
  color: #C00;
  font-size: 11px;
}

This is really good feature of LESS CSS. This make our code inheritance and shorter our coding.