Less

<div id="main">
  <div id="left"></div>
  <div id="right"></div>
</div>

嵌套

#main{background:red;
 #left{background:yellow;
   &:hover{background:gray;} /*** &的使用 ***/
   &.active{font-weight:700} /*** 只有在active前加上&才能实现 #left.active的效果 ***/
 }
 #right{background:green;}
}

变量

通过变量定义一系列通用样式，然后再其他地方调用该样式。作用：做全局样式。

@width:12;
@height:100px;
.border{
  width:@width*1px;
  height:@height;
}

@width:2px;
@style:solid;
@color:'red';
.box{
 border:@width @style @color;
}

作用域

.box{
 @a:10px; /*** 这边的a只能在.box起到作用，在.box外面是无反应的 ***/
}

混合

将一个定义好的classA样式引入另一个classB中，实现classB 继承 classA的所有属性

简单混合

.classA{border:1px solid red}
.left{
  .border;
}
.right{
 .border;
}

.clearFix{
 *zoom:1;
 &:after{
    content:'';display:block;clear:both;
 }
}
#main{
 .clearFix;
}

带参数混合