less不建议在服务器端使用，建议本地编译为css后引用，可下载“考拉编译器”或者配置编译器环境 使用nodeJs编译

1.定义全局变量，如定义主色调、副色调等

//变量
@color: #d8265f;
@yellow: #ffb400;

引用时可直接引用这些颜色

a { display: block; float: right; margin-right: 14px; color: #fff;
    &:hover { color: @color; }
  }
 b { display: block; font-size: 16px; margin-top: 8px; }
        &:hover, &.on { background: @color; color: #fff; }

2.定义函数，使用时可传参或使用默认参数，如将css缓冲定义为函数

.transition (@transition: 300ms) {
  -moz-transition:all @transition linear;
  -webkit-transition: all @transition linear;
  transition:all @transition linear;
}

需要加入缓冲效果是直接引用此函数，参数可传可不传，不传代表使用默认时间

small { display: block; font-size: 12px; color: #b6b6b6; line-height: 16px; .transition(); }

3.less基本语法

less极大的提升了代码的复用率，免去了相同class类名的重复编写，如：

<div class="h-bm">
        <div class="container clearfix">
            <span>2017年全新课程火热报名中!</span>
            <i class="iconfont icon-tel"></i>
            <b>13814862805</b>
            <a href="__APP__/message">预约报名</a>
        </div>
    </div>

less文件如下：

.h-bm { height: 60px; line-height: 60px; font-size: 18px; color: @color; background: #000;
  span { display: block; float: left; }
  i { display: block; float: left; color: #fff; margin: 0 10px; font-size: 20px; }
  b { display: block; float: left; font-size: 20px; color: #fff; }
  a { display: block; float: right; width: 100px; height: 40px; line-height: 40px; font-size: 14px; color: #fff; background: @color; margin-top: 10px; text-align: center;
    &:hover { background: @yellow; }
  }
}

less编译后的css如下：

.h-bm {
  height: 60px;
  line-height: 60px;
  font-size: 18px;
  color: #d8265f;
  background: #000;
}
.h-bm span {
  display: block;
  float: left;
}
.h-bm i {
  display: block;
  float: left;
  color: #fff;
  margin: 0 10px;
  font-size: 20px;
}
.h-bm b {
  display: block;
  float: left;
  font-size: 20px;
  color: #fff;
}
.h-bm a {
  display: block;
  float: right;
  width: 100px;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  color: #fff;
  background: #d8265f;
  margin-top: 10px;
  text-align: center;
}
.h-bm a:hover {
  background: #ffb400;
}

可见只需要定义第一个类名，之后的类名都会在编译是自动加上，不会产品类名冲突的问题。

4.复用css样式

.f-contact { height: 90px; line-height: 90px; background: #1b1b1b; width: 100%; position: fixed; left: 0; bottom: 0; z-index: 1; color: #fff;
  a { display: block; float: left; padding-left: 133px; height: 90px; font-weight: bold; color: #fff; font-size: 18px; background: url(../Image/qq.png) no-repeat left bottom;
    span { color: @color; }
    &:hover { color: @color; }
  }
  .address { font-size: 14px;
    b { font-size: 18px; }
  }
  .tel { .f-contact .address; margin-right: 150px; }
}

上面的代码中.tel就复用了.address的样式，当然复制粘贴过来也是一样的。

5.less的优点：提高代码复用率，减少css冲突，便于网站整体色调统一。

使用时需注意编译器会在同级目录编译产生同名的css文件，注意文件名不要冲突。如：style.less，会自动编译产生style.css