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();


浙ICP备17015664号 浙公网安备 33011002012336号 联系我们 网站地图  
@2019 qikegu.com 版权所有,禁止转载