Less - CSS 守卫

LESS - 使用 CSS Guards 实现条件样式

描述

LESS 中的 CSS Guards（CSS 守卫）允许您基于表达式有条件地应用 Mixins。它们的作用类似于 Mixins 的 if 语句，使您的样式表更加动态和智能。带有守卫的 Mixin 只有在守卫条件评估为真时才会输出其样式。

守卫使用 when 关键字定义，后跟括号中的条件。您可以在这些条件中使用各种运算符和函数，包括比较运算符（>、<、=、>=、<=）、逻辑运算符（and、or、not）以及类型检查函数（例如，iscolor()、isnumber()、isstring()）。

示例：根据输入调整样式

让我们创建一个 Mixin，根据参数的类型或值应用不同的样式：

style.less

// 设置文本颜色的 Mixin，由类型守卫
.set-text-color(@value) when (iscolor(@value)) {
  color: @value;
}

// 设置字体大小的 Mixin，由类型和值守卫
.set-font-size(@value) when (isnumber(@value)) and (@value > 10) {
  font-size: unit(@value, px);
}

// 特定主题样式的 Mixin
.apply-theme(@theme-name) when (@theme-name = 'dark') {
  background-color: #333;
  color: #f1f1f1;
}

.apply-theme(@theme-name) when (@theme-name = 'light') {
  background-color: #f8f8f8;
  color: #333;
}

// 用法
.element-one {
  .set-text-color(blue);          // 应用：color: blue;
  .set-font-size(16);           // 应用：font-size: 16px;
}

.element-two {
  .set-text-color("this is not a color"); // 守卫失败，不输出颜色样式
  .set-font-size(8);              // 守卫失败（8 不大于 10），不输出字体大小样式
}

.dark-card {
  .apply-theme('dark');
}

.light-card {
  .apply-theme('light');
  .set-font-size(12px); // 如果是大于 10px 的数字则应用字体大小（会将 12px 转换为 12）
}

要编译这段 LESS 代码（例如，使用 LESS 命令行编译器）：

lessc style.less style.css

预期的 style.css 输出：

.element-one {
  color: blue;
  font-size: 16px;
}

/* .element-two 将为空，因为守卫失败了 */
.element-two {}

.dark-card {
  background-color: #333;
  color: #f1f1f1;
}

.light-card {
  background-color: #f8f8f8;
  color: #333;
  font-size: 12px;
}

Guards 的主要用例：

• 创建根据输入参数改变外观的可适应组件。
• 通过使用主题标识符守卫样式块来实现主题。
• 验证 Mixin 输入以防止意外的 CSS 输出。
• 编写更健壮的实用 Mixins，优雅地处理不同的数据类型。

多重 Guards 和 & 特性：

您可以定义多个同名但带有不同守卫的 Mixins。LESS 将只执行条件满足的那个或那些。选择器上下文中的 & (and) 关键字与守卫条件中使用的 and 逻辑运算符不同。虽然守卫可以使用 and、or 和 not 进行组合，但 & 特性指的是父选择器引用，这是一个独立的概念，常用于 Mixins 内部，但本身不是守卫语法的一部分。