这一节我们学习混合守卫（MixinsGuards），当我们想要匹配简单的值或者表达式上的参数个数时，Guards会很有用。为了尽可能保持CSS的声明性，在@media查询属性规则中，Less选择了Guards函数的形式来代替if/else语句来实现条件执行。示例：让我们看下面的示例，它定义了两个mixin::.common(@w;@h)when(@w>=100px){font-size:18px;}.common(@w;@h){color:red;}第一个mixin有条件判断，第二个mixin没有条件判断。下面我们在两个样式类中引用上面两个mixin：.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条件，最终只输出mix中的样式属性，不做条件判断。Guards比较运算符Less包含五个Guards比较运算符，分别是>、>=、=、=<、<。关键字true是使两个mixin等价的唯一真值，因此以下两个mixin等价：.truth(@a)when(@a){...}.truth(@a)when(@a=true){...}除了关键字true之外的任何值都是false：.truth(@a)when(@a){font-size:14px;}.one{.truth(真);//只有rue是真的}.two{.truth(7);//其他任何值为false}编译成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中，我们给出了两个条件，一是参数必须是颜色值，二是必须是红色。只有同时满足这两个条件，才会输出颜色属性：.xkd(@color)when(iscolor(@color))and(@color=red){color:@color;}.one{.xkd(red);}.two{.xkd(blue);}编译成CSS代码：.one{color:red;}oroperator:表示只要有一个条件为真，就可以匹配，而,运算符也可以用来代替或。例子：Mixins有两个条件，一个是参数大于50px，一个是参数小于200px，只要满足其中一个条件就可以成功输出：.xkd(@width)when(@width>50px),(@width<200px){width:@width;}.one{.xkd(100px);}.two{.xkd(20px);}编译成CSS代码：.一个{宽度：100px；}。两个{宽度：20px；}not关键字：用于否定条件。例子：在Mixins中给出了一个条件，参数大于100px，但是因为使用了not关键字来否定这个条件，所以只要小于100px就可以成功输出：.xkd(@width)当not(@width>100px){width:@width;}.one{.xkd(50px);}.two{.xkd(200px);}编译成CSS代码：.one{width:50px;}default()functiondefault()函数可以用来根据已经创建的Mixins条件形成条件的补集。示例：.xkd(@width)when(@width>100px){width:@width;}.other(@width)when(default()){//default()等同于@width<=100pxwidth:@width;}.one{.xkd(50px);}.two{.other(50px);}编译成CSS代码：.two{width:50px;}上面代码中，两个样式类分别引用了.xkd和.other是混合的，.xkd中的条件是参数大于100px，.other中的条件是参数小于等于100px。default()相当于@width<=100px。
