Less.js 中 CSS 变量计算问题的解决方案

在 Less.js 预处理器中使用 CSS 自定义属性（变量）时，开发者可能会遇到一个常见问题：当尝试在变量声明中执行数学计算时，计算结果不会被自动求值，而是被当作字符串处理。这个问题尤其在使用 Less 的 each 函数遍历映射（map）结构并生成 CSS 变量时容易出现。

问题现象

开发者通常会这样定义字体大小变量：

@defaultFontsizeMultiplier: 16;

@fontSize: {
  size1: 64;
  size2: 40;
  size3: 24;
  text: 16;
  small: 14;
  tiny: 10;
}

:root {
  each(@fontSize, {
    --fl-fs-@{key}: (@value / @defaultFontsizeMultiplier) * 1rem;
  });
}

期望的输出是计算后的 rem 单位值，但实际上得到的却是包含计算表达式的字符串。

问题原因

这个问题源于 Less 编译器的工作机制。当在 CSS 自定义属性（以 -- 开头的变量）中直接使用数学表达式时，Less 不会自动计算这些表达式，而是将它们原样输出为 CSS。这是因为 CSS 自定义属性本身支持在浏览器运行时进行计算，Less 选择保留这种能力而不是在预处理阶段进行计算。

解决方案

要解决这个问题，我们需要在将值赋给 CSS 变量之前完成所有计算。可以通过以下两种方式实现：

方法一：使用中间变量

:root {
  each(@fontSize, {
    @computedValue: (@value / @defaultFontsizeMultiplier) * 1rem;
    --fl-fs-@{key}: @computedValue;
  });
}

这种方法创建了一个临时的 Less 变量 @computedValue 来存储计算结果，然后再将这个值赋给 CSS 变量。Less 会在预处理阶段完成计算，确保最终输出的是计算后的值。

方法二：使用单位函数

:root {
  each(@fontSize, {
    --fl-fs-@{key}: unit((@value / @defaultFontsizeMultiplier), rem);
  });
}

这种方法使用了 Less 的 unit() 函数，它可以将数值转换为指定单位的长度值。这种方式更加简洁，特别适合只需要简单单位转换的场景。

最佳实践

1. 预处理阶段完成计算：尽可能在 Less 预处理阶段完成所有计算，而不是依赖浏览器运行时计算。

2. 保持一致性：如果项目中同时使用了 Less 变量和 CSS 变量，确保命名规则清晰区分两者。

3. 文档注释：为复杂的计算添加注释，说明计算逻辑和预期结果。

4. 测试验证：使用 Less 的在线编译器或构建工具验证输出是否符合预期。

扩展应用

这个解决方案不仅适用于字体大小计算，还可以应用于：

• 间距系统（padding/margin）
• 容器尺寸计算
• 响应式布局的基准值计算
• 颜色透明度计算

通过掌握这个技巧，开发者可以更灵活地在 Less 中使用 CSS 变量，同时保持预处理器的计算优势。