为什么此scss输出不显示计算出的总数，而是显示var的字符串？

Question

我有这个.scss文件/ sass：

$var-1:100px;
$var-2:100px;
$var-3:100px;
$total-height:$var-1 + $var-2 + $var-3;
.some-class{
  max-height: calc(100vh - $total-height); // 100vh + 300px 
}

最终输出的css仅输出以下内容：

.some-class{
  max-height: calc(100vh - $total-height);
}

300px没有得到处理，所以我想知道为什么var没有输出预期的var。

Answer 1

您需要对变量执行interpolate操作才能在calc()中使用它

.some-class {
  max-height: calc(100vh - #{$total-height});
}