使用CSS变量存储calc()运算符是否存在潜在问题？

你尝试用CSS变量存储calc()中的运算符，示例代码如下：

.element {
    --op: +;
    width: calc(100px var(--op) 10px);
}

通过添加类修改运算符：

.multiply {
    --op: *;
}

已知原生CSS可运行但SASS不识别，这种做法确实会引发一些后续问题：

• 预处理器兼容性受限：除SASS外，LESS等CSS预处理器在编译阶段会解析calc()语法，但变量中的运算符属于运行时动态值，预处理器无法识别，会直接抛出编译错误，导致无法生成正常的CSS文件。
• 浏览器兼容性边缘问题：现代主流浏览器支持这种组合，但旧版本浏览器（如IE11完全不支持CSS变量，部分早期Chrome/Firefox版本存在解析bug）会无法正确计算calc()值，导致元素样式失效。
• 代码可读性与维护性降低：这种写法虽灵活，但对不熟悉该技巧的开发者来说可读性差，后续维护时容易误改或困惑变量的作用。
• 调试难度提升：浏览器DevTools中会显示带变量的原始calc()表达式，排查计算问题时需要手动替换变量值，增加调试成本。

如果需要兼顾预处理器兼容性和动态修改需求，可以改用预处理器的混合宏实现类似逻辑，比如SASS的mixin：

@mixin element-width($operator: +) {
  @if $operator == + {
    width: calc(100px + 10px);
  } @else if $operator == * {
    width: calc(100px * 10px);
  }
}

.element {
  @include element-width();
}

.multiply {
  @include element-width(*);
}

内容的提问来源于stack exchange，提问作者Georgi Demirev