less学习笔记6-语言特性（Guards）

本来说好上周末要出的这一篇结果拖到了现在，公司上需要做一个h5的游戏，最近这一周都在做这个游戏的单机demo，完全没时间来写这个文章。昨天算是把demo的大体完成了，今天可以抽出一点时间来整理这一部分。

---

Mixin Guards（mixin 监控）

带条件的mixins

当你想要匹配一个表达式的时候，guards是非常有用的。如果你熟悉函数式编程的话，那你很可能已经见过了。
为了尽可能的接近css的声明性性质，less选择实现条件化执行的方式，如：在media查询特性规范的结构中，使用 guards mixins代替if/else语句。

.mixin (@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.mixin (@a) {
  color: @a;
}

关键在when这个关键词上，when这个关键词定义了监控原则（这里只有一个监控）。如果我们运行以下代码：

.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }

编译为：
.class1 {
  background-color: black;
  color: #ddd;
}
.class2 {
  background-color: white;
  color: #555;
}

guard中比较运算符

在guards中可用的运算符为： > , >= , = , =< , < 。此外，关键词true是唯一的真值，下面两个mixins相等：

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

除了关键词true以外，任何值都是假的：

.class {
  .truth(40); //不会匹配上面声明的语句
}

你也可以进行参数之间的比较，或者参数和非参数之间进行比较：

@media: mobile;

.mixin (@a) when (@media = mobile) { ... }
.mixin (@a) when (@media = desktop) { ... }

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

guard中的逻辑运算符

你可以在guards中使用逻辑运算符，语法是基于css的媒体查询。
使用关键词 and 去连接guards：

.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }

你可以模仿 or运算符通过使用逗号将guards进行分隔。如果任何guards被判断为真，会被进行匹配：

.mixin (@a) when (@a > 10), (@a < -10) { ... }

使用关键词 not 与条件取反

.mixin (@b) when not (@b > 0) { ... }

类型检查函数（Type Checking Functions）

最后，如果你想要基于类型来匹配mixins的话，你可以使用is函数：

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

下面是基本的类型检查函数：

• iscolor
• isnumber
• isstring
• iskeyword
• isurl
  如果你想要检查一个值是否在一个特定的单元中（不是当做数字），你可以使用：
• ispixel
• ispercentage
• isem
• isunit

有条件的mixins

另外，default函数可以根据其他mixin匹配来进行mixin匹配，您可以使用它创建类似于else或默认语句(分别是if和case结构)的“条件mixin”：

.mixin (@a) when (@a > 0) { ...  }
.mixin (@a) when (default()) { ... } // 只有第一个mixin不匹配时才会匹配这个

CSS Guards（css监控）

发布于v1.5.0
guards也可以用在css选择器上，这是一种语法糖，用于声明mixin，然后立即调用它。
在1.5.0之前你可能需要这样做：

.my-optional-style() when (@my-option = true) {
  button {
    color: white;
  }
}
.my-optional-style();

现在你可以直接在样式中使用guard

button when (@my-option = true) {
  color: white;
}

你也可以通过结合这个和&特性，从而实现一个if类型语句，允许组合多个guards:

& when (@my-option = true) {
  button {
    color: white;
  }
  a {
    color: blue;
  }
}