本节我们学习 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。