Less学习

变量的延迟加载

.class{
@nav=1;
nav:@nav;
@nav=2;
}

结果nav：2

嵌套规则

.nav{
&:hover{
}
}

普通混合

//普通混合
.center{
  position: absolute;
  width: 100px;
  height: 100px;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  background-color: red;
}
  .inner{
    .center;
  }
  .inner2{
    .center;
  }

带参数的混合

.center（@w:10px，@h:10px，@c:pink）{
  position: absolute;
  width: @w;
  height: @h;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  background-color: @c;
}
  .inner{
    .center(100px,100px,blue);
  }
  .inner2{
    .center(50px,50px,red);
  }

匹配模式

.trangle(@_){

}
.trangle(B,@w,@c){
border-color:transparent transparent @c transparent
}

继承：extend（）

避免编译：~" "