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

你可能感兴趣的:(Less,Less)