关于less:Less-CSS-守卫

本节咱们学习 CSS守卫（CSS Guards），在上一节中，咱们学习了混合守卫，如何对 Mixins 进行条件判断。然而某些时候咱们不止须要对 Mixins 进行条件判断， 也须要对 CSS 的款式类进行条件判断。所以这就须要用到 CSS 守卫啦。

CSS 守卫是在 v1.5.0 版本才增加的，而在 v1.5.0 版本之前，如果咱们要定义一个 CSS 守卫：

.xkd() when (@choice = true) {  p{    color: @color;  }}.xkd();

当初咱们能够间接在款式类上利用 guard ，例如：

p when (@choice = true) {  color: red;}

咱们还能够通过与 & 符号联合实现 if 类型的语句，从而实现对多个款式类进行条件判断：

& when (@choice = true) {  p {    color: white;  }  a {    color: blue;  }}

示例：

上面咱们来看一个 CSS 守卫的具体例子：

@variable: a;.xkd() {   @variable: b;  .style1 when (@variable=a) {    font-size: 12px;    color: red;  }  .style2 when (@variable=b) {   font-size: 16px;    color: blue;  }}.xkd();

编译成 CSS 代码：

.style2 {  font-size: 16px;  color: blue;}

上述代码中，在混合 .xkd 中多两个款式类进行了条件判断，条件判断的根据是变量 @variable 变量的值，而依据之前咱们学习过的变量作用于能够晓得，会优先在混合.xkd 中查找变量 @variable，此时 @variable 的值为 b，所以能够看到编译后输入款式为 .style2。