less学习（九）—关于Guards

Less Mixin Guards

如果你想在表达式上匹配简单的值或参数数量，那么你可以使用Guards。 它与mixin声明相关联，并包括附加到mixin的条件。 每个mixin将有一个或多个由逗号分隔的防护，并且guard必须括在括号中。 LESS使用Guards的mixins而不是if / else语句，并执行计算以指定匹配的mixin。

下面列出了不同类型的mixins guard以及描述。

1、Guard比较运算符：可以使用比较运算符（=）来比较数字，字符串，标识符等

2、Guard逻辑运算符：可以使用‘和’关键字处理带有Guards的逻辑运算符

3、类型检查函数：包含内置函数来确定匹配mixin的值类型

4、LESS Mixin Guards：less使用默认函数mixin与其他mixin进行匹配

.mixin (@a) when (lightness(@a) >= 50%) {   font-size: 14px;}.mixin (@a) when (lightness(@a) < 50%) {   font-size: 16px;}.mixin (@a) {   color: @a;}.class1 {   .mixin(#FF0000)}.class2 {   .mixin(#555)}

输出为：

.class1 {  font-size: 14px;  color: #FF0000;}.class2 {  font-size: 16px;  color: #555;}

Less CSS Guards

Guard用于匹配表达式上的简单值或参数个数。 它应用于CSS选择器。 它是用于声明mixin并立即调用它的语法。 要成功地引出 if 类型语句; 将此功能与功能＆结合使用，您可以将多个guards分组。

@usedScope: global;.mixin() {  @usedScope: mixin;  .cont when (@usedScope=global) {    background-color: red;    color: black;  }  .style when (@usedScope=mixin) {    background-color: blue;    color: white;  }  @usedScope: mixin;}.mixin();

输出为：

.style {  background-color: blue;  color: white;}