Less – CSS守卫(Guard)

守卫就是条件的意思，可以给选择器设置生效的条件。

与Mixin守卫一样，守卫也可以应用于css选择器，这是一种语法糖，用于声明Mixin并立即调用它。
例如，在1.5.0之前，你必须这样做:

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

现在，您可以直接将守卫应用于样式。

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

您还可以通过将其与&特性结合使用来实现if类型语句，从而允许您对多个守卫进行分组。

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

注意，您还可以通过使用实际的if()函数和变量调用来实现类似的功能。如:

@dr: if(@my-option = true, {
  button {
    color: white;
  }
  a {
    color: blue;
  }
});
@dr();