Less 小记

1 定义变量并使用 （变量可以计算）

@color: pink;
.box1{
  width: 100px-10;
  height: 100px;
  background: @color;
}

2  混合  可以将样式混合到另一个样式中

      ①  

@color: pink;
.box1{
  width: 100px;
  height: 100px;
  background: @color;
  .border
}
.border{
  border: 2px solid yellow;
}

    ②  混合可以传值并且可以带默认值

.box1{
  width: 100px;
  height: 100px;
  background: @color;
  .border2(5px)
}
.border2(@width:2px){
  border-top:@width solid yellow;
}

3 匹配模式 相当于js 的 if else

          通用的样式 要用参数 @_ 传入,

.positon(r,@w:200px,@h:200px){
  position: relative;
  width: @w;
  height: @h;
}
.position(a,@w:200px,@h:200px){
  position: absolute;
  width: @w;
  height: @h;
}
.position(f,@w:200px,@h:200px){
  position: fixed;
  width: @w;
  height: @h;
}
.position(@_,@w:200px,@h:200px){
  background: #0b87b7;
}
.box2{
  .position(f)
}

4   嵌套  （&代表它的上一层选择器）

.box3{
  width: 100px;
  height: 100px;
  background: #000;
  ul{
    width: 60px;
    height: 60px;
    background: #ccc;
    li{
      width: 40px;
      height: 40px;
      background: pink;
      &:hover{
        background: yellow;
      }
    }
  }
}

5 @arguments  可以按照顺序代表所有传入的变量

.border_arg(@w:5px,@c:#000,@xx:solid){
  border: @arguments
}
.box4{
  width: 200px;
  height:200px;
  background: #eb1212;
  .border_arg(10px,gray)
}

6 避免编译 （有时需要输出一些不正确的css语法或less不认识的语法，波浪号 ~ 和引号"" 要紧跟着不然会报错）

   比如 calc 是需要浏览器计算，而不是less计算的时候

.box5{
  width: ~'calc(300px - 30)';
}