Less 混合守卫
本节我们学习混合守卫（Mixins Guards），当我们想在表达式上匹配简单值或参数数量时，Guards 将会很有用。为了尽可能地保持 CSS 的声明性质，在 @media 查询特性规则中，Less 选择 Guards 函数的形式而不是 if/ else 语句来实现条件执行。
示例：
我们来看下面这个例子，定义了两个混合：：
.common (@w; @h) when ( @w >= 100px) {
font-size: 18px;
}
.common (@w; @h) {
color: red;
}
第一个混合带有条件判断，第二个混合不带有条件判断，下面我们在两个样式类中引用上述的两个混合：
.one{
.common(150px, 50px);
}
.two{
.common(70px, 20px);
}
编译成 CSS 代码：
.one {
font-size: 18px;
color: red;
}
.two {
color: red;
}
可以看到，在 .one 中引用 .common 混合时，给 @w 参数赋值为 150px，满足 @w >= 100px 条件，所以代码编译后，.one 样式类输出了两个混合中的样式属性。.two 样式类则相反，不满足 @w >= 100px 条件，最后只输出了不带条件判断的混合中的样式属性。
Guards比较运算符
Less 中包含五个 Guards 比较运算符，分别是>，>=，=，=<，<。关键字 true 是让两个 Mixins 等价的唯一真值，所以以下两个 Mixins 是等价的：
.truth (@a) when (@a) { ... }
.truth (@a) when (@a = true) { ... }
除了关键字 true，其他任何值都是假值：
.truth (@a) when (@a) {
font-size: 14px;
}
.one{
.truth(true); // 只有 rue 为真值
}
.two{
.truth(7); // 其他任何值都是假值
}
编译成 CSS 代码：
.one {
font-size: 14px;
}
也可以对两个变量进行比较，例如我们来看下面这个例子：
示例：
在 Mixins 中带有两个参数，如果参数 @a 的值大于 @b，则 width 的值为 @a，反之 width 的值为 @b：
.xkd (@a; @b) when (@a > @b) {
width: @a
}
.xkd (@a; @b) when (@a < @b) {
width: @b
}
.one{
.xkd(10px, 20px);
}
.two{
.xkd(200px, 100px);
}
编译成 CSS 代码：
.one {
width: 20px;
}
.two {
width: 200px;
}
Guards逻辑运算符
当 Mixins 的判断条件含有两个或多个时，可以使用 Guards 逻辑运算符将条件进行关联。逻辑运算符有 and、or、not 三个。
and关键字：用于对两个条件取并集。
示例：
在 Mixins 中我们给出了两个条件，一个是参数必须是颜色值，还有一个是必须是红色，只有同时满足这两个条件，才会输出 color 属性：
.xkd(@color) when (iscolor(@color)) and (@color = red) {
color: @color;
}
.one{
.xkd(red);
}
.two{
.xkd(blue);
}
编译成 CSS 代码：
.one {
color: red;
}
or运算符：表示只要有一个条件为真就可以匹配，还可以使用,运算符来替代or。
示例：
在 Mixins 中有两个条件，一个是参数大于 50px，一个是参数小于 200px，只要满足其中一个条件，就可以成功输出：
.xkd(@width) when (@width > 50px), (@width < 200px) {
width: @width;
}
.one{
.xkd(100px);
}
.two{
.xkd(20px);
}
编译成 CSS 代码：
.one {
width: 100px;
}
.two {
width: 20px;
}
not关键字：用于否定条件。
示例：
在 Mixins 中给出了一个条件，参数大于 100px，但是因为使用了 not 关键字来否定这个条件，所有只要满足小于 100px 就能成功输出：
.xkd(@width) when not (@width > 100px) {
width: @width;
}
.one{
.xkd(50px);
}
.two{
.xkd(200px);
}
编译成 CSS 代码：
.one {
width: 50px;
}
default()函数
default() 函数可以用于根据已经创建好的的 Mixins 条件来形成该条件的补集。
示例：
.xkd(@width) when (@width > 100px) {
width: @width;
}
.other(@width) when (default()) { // default()等价于 @width <= 100px
width: @width;
}
.one{
.xkd(50px);
}
.two{
.other(50px);
}
编译成 CSS 代码：
.two {
width: 50px;
}
上述代码中，在两个样式类中分别引用了 .xkd 和 .other 两个混合，而 .xkd 中的条件为参数大于100px，.other 中的条件为参数小于等于 100px。default() 就等价于 @width <= 100px。