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外面是无反应的 ***/
}

混合

.border{1px solid red}
.left{
  .border
}
.right{
 .border
}