如何强制SASS简单计算时化简并避免插值？

根据SASS文档说明：

你也可以在计算中使用插值，但这样的话，插值周围括号内的内容不会被化简或类型检查，容易产生冗余甚至无效的CSS。建议不要写calc(10px + #{$var})，直接写calc(10px + $var)！

但编译以下SCSS代码时：

$var: 10px;

span {
    top: calc(10px + $var); // 无插值
    bottom: calc(10px + #{$var}); // 有插值
}

得到的CSS结果却和预期不符：

span {
  top: calc(10px + $var); // 变量未被替换
  bottom: calc(10px + 10px);
}

原因分析 #

SASS对calc()的处理逻辑是优先保留原生CSS的calc()结构，而非直接计算表达式结果。这是为了兼容原生CSScalc()的动态计算场景（比如混合百分比、视窗单位等）——如果SASS自动把calc(10px + $var)计算成20px，会破坏那些需要浏览器实时计算的动态样式。

文档中提到的“直接写calc(10px + $var)”，核心是建议当需要原生CSScalc()的动态能力时，不要用插值破坏变量的类型检查，而非指SASS会自动将表达式化简为静态数值。

实现无插值的计算化简 #

根据需求不同，有两种处理方式：

1. 不需要原生calc()，直接计算静态数值 #

如果只是想得到静态的计算结果，完全不需要calc()，直接写SASS表达式即可：

$var: 10px;

span {
    top: 10px + $var;
}

编译后输出：

span {
  top: 20px;
}

2. 需要原生calc()，同时化简变量表达式 #

如果确实需要保留原生calc()的动态能力（比如混合不同单位），同时让SASS先计算变量表达式，可以先将计算结果赋值给新变量，再通过插值传入calc()：

$var: 10px;
$total: 10px + $var;

span {
    top: calc(#{$total});
    // 或者直接内联计算
    bottom: calc(#{50% - $var});
}

编译后输出：

span {
  top: calc(20px);
  bottom: calc(50% - 10px);
}

内容的提问来源于stack exchange，提问作者Grzegorz Adam Kowalski