本来说好上周末要出的这一篇结果拖到了现在，公司上需要做一个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;
}
}
