less

1.变量（用于定义常用参数）
@color:#fff;
body{
  color:@color;
}
变量计算    可以加减乘除
@color:#234152;
@deep-color:@color + #111;        //叠加后为#345163
@width:10px;
#header{
  width:@width * 3;
}
变量覆盖
@color:#222;
@color:#333;
最终输出#333,后面定义的变量讲覆盖前面定义的变量。
@arguments        //包含所有传递进来的参数
.box-shadow(@x:1px,@y:1px,@blur:2px;@color:@333){
   box-shadow:@arguments;
}

2.混合，一个类可以嵌套到另一个类中。被嵌套类继承嵌套类的样式。
.cricle(@radius:5px){
  border-radius:@radius;
  width:10px;
  height:10px;
}
#header{
  .cricle;        //header继承cricle样式
}
混入传参
.cricle(@radius){
  border-radius:@radius;
  width:10px;
  height:10px;
}
#header{
 .cricle(5px);
}
不带参数
.cricle(){
 broder-radius:10px;
}
#header{
  .cricle;
}

3.嵌套规则 子级元素可写在父级元素内部
div{
  color:red;
  p{        //p为div的子元素
    font-size:20px;
    }
  a{
    color:yellow;
    &:hover{ font-size:20px;}    //&指代当前对象
}

4.命名空间
#bundle{        //bundle命名空间下有两个类样式
  .button(){
    width:20px;
    height:20px;
  }
  .active{
     color:red;
  }
}

#header{
  font-size:#333;
  #bundle > .button;        //使用bundle命名空间下的.button样式
}