如何在SCSS的min/max函数中正确使用env()方法？解决编译报错

问题根源 #

你遇到的报错"env(safe-area-inset-top)" is not a number for "max"，本质是SCSS内置的max()函数和CSS原生max()函数的冲突：

• SCSS的max()是编译时函数，要求所有参数都是它能解析的数值类型（比如百分比、像素值）；
• 但env(safe-area-inset-top)是浏览器运行时才会计算的环境变量，SCSS在编译阶段无法把它识别为有效数字，所以抛出错误。

正确的两种解决方法 #

要让SCSS输出原生CSS的max()函数（而非自己解析它），可以用以下两种方式：

方法1：使用SCSS插值语法#{}

通过插值语法，告诉SCSS不要处理括号内的内容，直接原封不动输出到最终CSS中：

.modal-dialog {
  margin-top: #{max(6%, env(safe-area-inset-top))};
}

编译后的CSS会保留原生的max()调用，浏览器就能正常解析env()变量了。

方法2：使用css()函数（Dart Sass 1.33+）

如果你使用的是较新版本的Dart Sass，可以用css()函数明确指定这是一个CSS原生函数调用：

.modal-dialog {
  margin-top: css(max(6%, env(safe-area-inset-top)));
}

这种方式更清晰，能明确区分SCSS内置函数和CSS原生函数。

验证效果 #

编译后的最终CSS会是：

.modal-dialog {
  margin-top: max(6%, env(safe-area-inset-top));
}

浏览器运行时会正确比较6%和safe-area-inset-top的值，取较大的那个作为外边距。

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