混合守卫（Mixin Guards）

优质

小牛编辑

124浏览

2023-12-01

前面的章节中我们已经学习了 mixin 的各种用法，可以说 mixin 是 Less 中的一等公民。为什么这么说哪？因为在 Less 中有关逻辑判断几乎都是通过 mixin 去实现的。例如我们这个章节学习的条件判断就是与 mixin 结合所实现的，让我们一块来了解一下。

1. 语法定义

Conditional mixins——官方定义

慕课解释：根据条件进行判断。

在 Mixins 的使用条件需要匹配一个值或算法时，我们可以使用 Less 的条件判断。

与 Java 、Python 等函数式编程语言的条件判断一样，不过语法形式略有差异。

为了与 CSS 原生语言语法形式保持一致，在 Less 中是通过守卫函数的形式而不是 if/else ，与 @media 的用法类似。我们先来看一段包含条件判断的 Mixins ：

.bg (@color; @width) when (@width >= 50%) {
  background-color: black;
}

.bg (@color; @width) {
  color: @color;
}

when 关键字引入了守卫机制（条件判断），下面让我们来调用定义好的 Mixins ：

.container1 {
  .bg(red; 40%);
}

.container2 {
  .bg(red; 60%);
}

输出代码如下：

.container1 {
  color: red;
}

.container2 {
  background-color: black;
  color: red;
}

混合守卫适用于 mixins 需要匹配值、运算式、范围的场景，避免 mixin 出现调用错误。

条件判断的运算符包含以下几个：

此外，true 这个关键字是唯一代表条件为真的值。所以以下的两个 Mixins 是等价的：

.truth (@a) when (@a) { ... }
.truth (@a) when (@a = true) { ... }

其他的值代表条件都为假：

.a {
  .truth(10); // 10 与 true 不相等，所以不会有任何输出
}

我们也可以对两个变量进行比较：

.max (@a; @b) when (@a > @b) { width: @a }
.max (@a; @b) when (@a < @b) { width: @b }

当 Mixins 的判断条件含有两个及两个以上时，我们可以使用逻辑运算符将条件进行关联。

使用 and 关键字对两个条件取并集：

.mixin1 (@color) when (iscolor(@color)) and (@color = red) { ... }

我们可以使用 , 运算符来模拟 or 运算符，只要有一个条件为真就可以匹配。

.mixin2 (@width) when (@width > 20%), (@width < 80%) { ... }

使用 not 关键字代表否定条件：

.mixin3 (@width) when not (@b > 10%) { ... }

我们可以使用 Less 提供的类型检查函数对变量进行判断：

.mixin1 (@color) when (iscolor(@color)) { ... }
.mixin2 (@url) when (isurl(@url)) { ... }

主要有以下几种基础的类型检查函数：

如果要检查某个值是否除作为数字外还包含在特定单位中，还可以使用：

default() 函数可根据已创建的 Mixins 条件来形成该条件的补集。

.mixin (@width) when (@width > 10%) { ...  }
.mixin (@width) when (default()) { ... } // default()等价于 @width <= 10%

本章节介绍了混合守卫，在 Less 中我们可以使用混合守卫（即 when函数）代替 if ，如果需要使用 else 即需要使用到 default() 函数创建多个 mixins 进行匹配。