A simple example for implementing less which is really more...

Simple example for LESS

<div class="s3-div">
  <h1>Less CSS Example</h1>
  <p>This is how it works
    <small>
      Really easy to create more complex styles
    </small>
  </p>
  <small>
    this will never end.
  </small>
</div>

style.less

@base-color: #f00;
@font-color: #fff;
@font-size: 12px;
@padding: 0;
@line-height:100%;


html body{
  background-color:@base-color;
}

.rounded-corners (@radius: 100px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}

.less-div(@background-color:#000;){
  .rounded-corners;
  background-color:@background-color;
  padding: @padding + 0.5em; // padding:0.5em;
  color:@font-color;
  text-align:center; // a simple css text-align
   h1{
    font-size:@font-size + 28px; // font-size: 40px;
    line-height:@line-height;
  }
  p{
    font-size:@font-size + 12px; // font-size: 24px;
    line-height:@line-height;
    small{
      color:#888;
    }
  }
  small{
    color:@base-color;
    font-size:@font-size + 12px;
  }
}

.s3-div{
  .less-div;
}