Less学习（六）----类型检查函数(Type Checking Functions)，css 守卫(CSS Guards)，循环(Loop)，合并(Merge)

类型检查函数(Type Checking Functions)
要是想根据值的类型匹配混合,可以使用 is 函数
基础的类型检测函数
iscolor
isnumber
isstring
iskeyword
isurl
检查一个值是否在一个指定的单元中,除了数字
emmm 有点没太明白
ispixel
ispercentage
isem
isunit

.mixin (@a; @b: 0) when (isnumber(@b)) { ... }
.mixin (@a; @b: black) when (iscolor(@b)) { ... }

default 函数相当于 if 里的 else / case 里的 default

 .mixin (@a) when (@a > 0) { ...  }
 .mixin (@a) when (default()) { ... } // matches only if first mixin does not, i.e. when @a <= 0

css 守卫(CSS Guards)
可以在 css 选择器后使用,保护应用于css选择器，这是一种语法糖，用于声明mixin并立即调用它

@csscolor: red;
  // css 守卫
  .cssguard when (@csscolor = red) {
    color: @csscolor;
  }

循环
less的混合里可以迭代/循环
通过模式匹配和守卫来实现

 .mix(@a) when (@a > 0) {
      .mix((@a - 1));
      width: @a * 10px;
    }
    div{
      .mix(5);
    }
    output
    div{
      width: 10px;
      width: 20px;
      width: 30px;
      width: 40px;
      width: 50px;
    }

合并(Merge)
合并 就是把多个属性值 使用 逗号 或者 空格 隔开合并到一个属性里
为了避免任何无意的合并加入，merge需要在每个需要合并的属性声明上使用显式的+或+_标志。
+ 是逗号隔开
± 是空格隔开

1.使用 , 的

.mixin() {
  box-shadow+: inset 0 0 10px #555;
}
.myclass {
  .mixin();
  box-shadow+: 0 0 20px black;
}

输出

.myclass {
  box-shadow: inset 0 0 10px #555, 0 0 20px black;
}


2.使用空格的

.mixin() {
  transform+_: scale(2);
}
.myclass {
  .mixin();
  transform+_: rotate(15deg);
}
 输出
.myclass {
  transform: scale(2) rotate(15deg);
}