Less-minxin守卫二

Posted 2020-08-28 YanEr、

mixin卫士--判断

或与且语法

且：()and()
或：(),()

--且 examlpe:
.test(@a) when (isNumber(@a)) and (@a>=5){
    font-size:unit(@a,px);
}
.study{
    .test(10);
}

//output css
.study {
  font-size: 10px;
}

必须同时满足@a是数字且大于等于5，才会执行该mixin函数

 

--或 example:
.test(@a) when (@a>10),(@a<2){
    font-size:unit(@a,px);
}
//call 1
.study{
    .test(1);
}

//output css
.study {
  font-size: 1px;
}

//call 2
.study{
    .test(18);
}

//output css
.study {
  font-size: 18px;
}

当@a大于10或@a小于2时均会执行mixin函数

类型检查功能

   iscolor        --是颜色
   isnumber       --是数字
   isstring       --是字符串
   iskeyword      --是关键字
   isurl          --是url地址
   isunit         --是单位
   ispixel        --是像素
   ispercentage   --是百分百
   isem           --是em

not

--not            --不是，非
example:
.test(@a) when not (@a>10){
    font-size:unit(@a,px);
}
.study{
    .test(5);
}

//output css
.study {
  font-size: 5px;
}

当@a值为大于10的值，.test就不会被执行

default

*-default         --守卫返回失败是执行函数，类似于else
example:
.test(@a) when (@a>10),(@a<2){
    font-size:unit(@a,px);
}
.test(@a) when (default()){
    font-size:20px;
}
.study{
    .test(5);
}

//output css
.study {
  font-size: 20px;
}

注意：在这里“ = ”等同于Js中的“ == ”，是等于的意思，不是赋值，less的赋值采用“ ： ”。

 

 

作者：leona

原文链接：http://www.cnblogs.com/leona-d/p/6307570.html

版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接