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;
}

带参数混合

.border(@color){
  border:1px solid @color;
}
.left{
 .border(#ccc);
}
.right{
 .border(#b7b7b7);
}

带多参数混合

.border(@width,@color){
 border:@width solid @color
}
.left{
 .border(2px,#ccc);
}
.right{
 .border(1px,#b7b7b7);
}

带默认值的参数混合

.border(@width:1px,@style:solid,@color:red){
  border:@width solid #ccc;
}
.left{
  .border(1px,dotted);
}
.right{
 .border(3px)
}