关于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。