Question

在上一个章节中我们学习了混合守卫，但是在某些场景下我们不只是需要对 Mixin 进行条件判断，css 的样式类也是需要进行条件判断的，此时我们就需要使用到 CSS 守卫了。注意，该语法是在 v1.5.0 版本之后添加的，建议大家跟我下载同样的版本进行学习。

1. 语法定义

官方定义： “if”'s around selectors.

慕课解释： 类似与 Mixins 守卫，在选择器中使用类似于 “if” 的判断语句。

2. 方法详情

Guards 也可以应用于css选择器，它是用于声明 mixin 然后立即调用它的语法糖。

例如，在 v1.5.0 之前我们只能这样写去定义一个 CSS 守卫：

.style() when (@select = true) {
  button {
    color: white;
  }
}

.style();

但是现在我们可以直接在选择器上应用 guard ，例如：

button when (@select = true) {
  color: white;
}

我们还可以通过将其与 ＆ 功能结合使用来实现对多个 guard 进行分组。也就是说我们可以同时对多个样式类进行条件判断。

& when (@select = true) {
  button {
    color: white;
  }
  span {
    color: blue;
  }
}

总结

本章节我们介绍了 CSS 守卫，CSS 守卫本质上是对混合守卫封装的一个语法糖，让选择器使用 Guards 更加方便，使用场景及其他用法可参考混合守卫。