在 Less 中,Guards 是一种条件语句,它们允许你在 CSS 规则集中根据特定条件应用或排除样式。Guards 可以用于根据输入参数、状态或其他条件动态生成样式规则。

以下是一个简单的例子,演示如何在 CSS 规则集中使用 Guards:
// 定义带有 Guard 的规则集
.my-element when (@condition) {
  color: red;
}

// 使用规则集,根据条件应用样式
.my-element when (@condition) {
  background-color: blue;
}

在这个例子中,.my-element 规则集带有一个 Guard when (@condition),表示只有当 @condition 为真时,才会应用规则集内的样式。

Guards 可以使用任何 Less 表达式,并且可以与逻辑运算符一起使用,以实现更复杂的条件逻辑。
.my-element when (@size > 0) and (@size < 100) {
  // 根据条件生成样式
}

.my-element when (iscolor(@color)) {
  // 根据颜色条件生成样式
}

在上述例子中,第一个规则集使用 and 运算符来表示两个条件都必须满足,而第二个规则集使用 iscolor() 函数检查参数是否是颜色。 Guards 提供了在规则集中根据条件动态生成样式的强大工具。


转载请注明出处:http://www.zyzy.cn/article/detail/4297/Less