CSS守卫（CSS Guards）

优质

小牛编辑

126浏览

2023-12-01

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

1. 语法定义

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

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

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 更加方便，使用场景及其他用法可参考混合守卫。