less

less的编译有两大类
第一类：基于node环境编译less
第二类：基于浏览器环境
第一类

第二类

npm install -g less
lessc xxx.less xxx.css

less支持// 但是编译到css中会不显示，要是显示的话最好作用/**/注释

@a:300px;

width: unit(@num,px);单位
height: unit(ceil(@num),px);向上取整
height: unit(floor(@num),px);向下取整
height: unit(round(@num),px);四舍五入
height:percentage(@num);百分比
height:abs(@num);绝对值

使用模块化的方式把文件分离用@import引入less文件

嵌套、父选择符
&父选择符一般用于伪类

ul{
  display: inline-block;
  li{
    float: left;
    width: 25%;
    height: 30px;
    line-height: 30px;

    a{
      color: red;
      &:hover{
        color: gray;
      }
    }
    &{
      background-color: yellow;
    }
  }
}

//混合声明不带参数  就是把之前的一些样式拿过来直接用
.boder{
  border: 10px solid red;
}
//混合可带参数的
.border2(@xxx){
  border: @xxx solid yellow;
}
//混合带默认值
.border3(@xxx:10px){
   border: @xxx solid red;
}
.border-radius(@radius:5px){
   -moz-border-radius: @radius;
   -webkit-border-radius: @radius;
   border-radius: @radius;
}

匹配

//匹配模式
.triangle(top,@c,@w:10px){
   border-width: @w;
   border-color:@c transparent transparent transparent;
   border-style: solid;
}
.triangle(bottom,@c,@w:10px){
  border-width: @w;
  border-color:  transparent transparent @c transparent ;
  border-style: solid;
}
.triangle(left,@c,@w:10px){
  border-width: @w;
  border-color:  transparent transparent transparent @c;
  border-style: solid;
}
.triangle(right,@c,@w:10px){
  border-width: @w;
  border-color:  transparent  @c transparent  transparent;
  border-style: solid;
}
//不管匹配谁都会输出
.triangle(@_,@c,@w:10px){
  width: 0;
  height: 0;
}
.sanjiao{
  .triangle(top,red);
}

less运算

@a:300px;
.a{
  width: @a+20;
}

如果你比较懒也可以用这种方式

.border(@w:100px,@c:red,@s:solid){
  border: @arguments;
}

如果你觉得background-color比较长，也可以把它封起来

@bgc:red;
@bgname:background-color;
body{
     @{bgname}:@bgc;
}

不想被编译

.test{
  width: ~'calc(20px + 30px)';
}

!important

.border{
  width: 100px;
  height: 100px;
}
.test{
  .border !important;
}

when语句

.area(@a) when (@a>100){
    .base(@a);
    border-radius: 20px;
}
.area(@a) when (@a<=100){
    .base(@a);
    border-radius: 5px;
}
.base(@a){
  width: @a;
  height: 100px;
}

loop循环

//loop
.widthFun(@n,@i:10) when (@i<@n){
    .width-@{i}{
      width: @i/@n*100%;
    }
  .widthFun(@n,@i+10)
}
.widthFun(100);