less

0807

less

在less 里面 &代表当前的class本身

.box{
  width:100px;
  height:100px;
  background-color: #00a1d6;

  &:after{
    content: '';
  }

  .mian{
    border:1px solid #f00;
  }

  .name{
    height:100px;
  }
}

混合 将一个定义好的class A引入到另一个class B中，从而简单实现class B继承class A中的所有属性。

.border{
  border:1px solid #00a1d6;
}

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


.box{
  width:100px;
  height:100px;
  .clear;
  .border;
}

在less里面声明的所有变量都是常量,所有变量的名称都必须是唯一的

@name:12px;
.box3{
  border:@name solid #fff;
}

带参数的变量

.border(@color){
  border:1px solid @color;
}


.box{
  width:100px;
  height:100px;
  .border(#f00);
}

.main{
  .border(red);
}

带默认参数的变量

.border(@color){
  border:1px solid @color;
}


.box{
  width:100px;
  height:100px;
  .border(#f00);
}

.main{
  .border(red);
}

多个参数

.border(@width:1px,@style:solid,@color:#f00){
  border:@width @style @color;
  -moz-border:@width @style @color;
  -webkit-border:@width @style @color;
}

.box{
  .border;
}

.main{
  .border(10px,dotted,green);
}

arguments变量
@arguments代表所有参数（系统自定，不可更改）

.border(@width:1px,@style:solid,@color:#f00){
  border:@arguments;
}

.box{
  .border;
}

模式匹配

.border(box,@width:1px,@style:solid,@color:#f00){
  border:@arguments;
}
.border(a1,@width:10px,@style:solid,@color:#f00){
  border:@arguments;
}

.box{
  .border(a1);
}