Less-Guard守卫

Guard翻译过来就是守卫的意思,在less中的作用就是给less的属性添加判断条件

less除了基本的计算还可以进行逻辑判断

使用when关键字来表示判断条件加载的逻辑,后面是判断条件依据

基本使用

.mixin(@width,@height) when (@width >= 100) {
  width: @width;
  height: @height;
}

.box{
  .mixin(100px,100px);
  background: red;
}

Less-Guard守卫

 

 上面的条件是当width大于等于100px的时候,再进行赋值

Less包含5个判断条件的运算符: > , < , >= , <=, =

.mixin(@width,@height) when (@width = 100) and (@height = @width) {
  width: @width;
  height: @height;
}

.box{
  .mixin(100px,100px);
  background: red;
}

Less-Guard守卫

 

 and表示并且的意思,就是逻辑与,相当于js中&&判断,组合起来就是when和and

.mixin(@width,@height) when (@width = 100) , (@height = 100) {
  width: @width;
  height: @height;
}

.box{
  .mixin(120px,100px);
  background: red;
}

Less-Guard守卫

 

 使用逗号来表示逻辑或,相当于js中的||判断,组合起来就是when和,

.mixin(@width,@height) when not (@width = 100) {
  width: @width;
  height: @height;
}

.box{
  .mixin(120px,100px);
  background: red;
}

使用not来表示逻辑非,相当于js中的!,组合起来就是when和not

Less-Guard守卫

 

 可以使用when结合函数来实现循环

// 判断条件是当cont 大于0 的时候,函数就调用自己(递归)
.cont(@cont) when(@cont > 0) {
  // 内部调用自己
  .cont(@cont - 1);
  width: (5px * @cont);
}

.box{
  .cont(5)
}

Less-Guard守卫

 

 上面的编译之后的代码是以5px为基数进行乘积,循环5次进行赋值

内部的判断条件还可以是内置函数

.mixin(@color) when(iscolor(@color)) {
  background: @color;
}

.box{
  width: 200px;
  height: 200px;
  .mixin(red)
}

Less-Guard守卫

 

 iscolor是less的内置函数,返回的是一个布尔值,如果布尔值为true了,则能赋值mixin内的属性

 

上一篇:d的打包位.


下一篇:vue.mixin 混入理解和使用