less模块——匹配模式

相当于对函数的重写，根据参数匹配对应的混合

注：匹配模式并不是只会找最适合的一项进行匹配，所有合适的项都会匹配并生成效果

1、根据传参的值不同进行匹配

.test(light,@color){              //less
    color: lighten(@color,10%);
};
.test(dark,@color){
    color: darken(@color,10%);
};
.test(@_,@color){
    display: block;
};

@switch:dark;
div{
    .test(@switch,#888);
}

div {               //css
  color: #6f6f6f;
  display: block;
}

2、根据传参的个数不同进行匹配

.test(@width,@color){         //less
    color: @color;
    width: @width;
};
.test(@width){
    width: @width;
}

@width:200px;
@color:red;
div{
    .test(@width,@color);
}

div {             //css
  color: red;
  width: 200px;
}

3、根据引导（当when条件适合时）进行匹配  when

.test(@a)when(lightness(@a)>=50%){       //less
    background-color: black;
}
.test(@a)when(lightness(@a)<50%){
    background-color: white;
}
.test(@a){
    color: @a;
}
#div{
    .test(#666)
}
#span{
    .test(#ccc);
}

#div {                      //css
  background-color: white;
  color: #666;
}
#span {
  background-color: black;
  color: #ccc;
}

3.1、当使用逗号分隔时，表示为“或”操作符，只要符合一个条件就会被视为匹配成功

.test(@a)when(@a>50px),(@a<0px){   //less
    border-left: @a;
}
div{
    .test(51px)
}
span{
    .test(12px)
}

div {                         //css
  border-left: 51px;
}

3.2、使用and作为连接符时，只有符合所有条件才会被视为匹配成功

.test(@a)when(@a<50px)and(@a>0px){    //less
    border-left: @a;
}
div{
    .test(51px)
}
span{
    .test(12px)
}

span {             //css
  border-left: 12px;
}

3.3、使用not作为连接符，表示除该条件之外，其它情况会视为匹配成功

.test(@a)when not(@a<50px){       //less
    border-left: @a;
}
div{
    .test(51px)
}
span{
    .test(12px)
}

div {                  //css
  border-left: 51px;
}