CSS Guards

选择器中的“if”

发布 v1.5.0

与 Mixin Guards 类似，guards 也可以应用于 CSS 选择器，这是声明 mixin 然后立即调用它的语法糖。

例如，在 1.5.0 之前，你必须执行以下操作：

.my-optional-style() when (@my-option = true) {
  button {
    color: white;
  }
}
.my-optional-style();

现在，你可以直接将 guard 应用于样式。

button when (@my-option = true) {
  color: white;
}

你还可以通过将其与“&”功能结合使用来实现“if”类型语句，从而使多个 guards 分组。

& when (@my-option = true) {
  button {
    color: white;
  }
  a {
    color: blue;
  }
}

请注意，你还可以通过使用实际的 if() 函数和变量调用来实现类似的模式。如：

@dr: if(@my-option = true, {
  button {
    color: white;
  }
  a {
    color: blue;
  }
});
@dr();