SCSS环境下CSS库用round()报错，如何解决函数兼容问题？

我开发的CSS库中使用了CSS原生round()函数，代码如下：

--terminal-line: calc(var(--size, 1) * (16px / var(--pixel-density, 1)) + 1px / var(--pixel-density, 1));
line-height: round(var(--terminal-line, 1em));

当用户在SCSS环境中使用该库时，出现错误提示：

"jquery.terminal.css:850:22": argument $number of round($number) must be a number。

已知round()属于CSS基线特性，请问如何让该CSS库在SCSS环境中正常使用round()函数？

解决方案 #

问题根源是SCSS内置了同名的round()函数，编译阶段会优先尝试解析这个SCSS函数，但CSS变量var(--terminal-line, 1em)在编译时无法被识别为有效数值，因此抛出错误。以下是几种可行的解决方法：

1. 使用SCSS插值语法跳过函数解析 #

用#{}包裹整个round()调用，明确告诉SCSS直接将这段代码输出为原生CSS，不进行函数解析：

line-height: #{round(var(--terminal-line, 1em))};

2. 转义函数名 #

在round前添加反斜杠，转义后SCSS会将其视为原生CSS标识符，而非自身内置函数：

line-height: \round(var(--terminal-line, 1em));

3. 借助CSS变量间接传递 #

先将round()的计算结果存入另一个CSS变量，再将该变量应用到line-height上：

--terminal-line-rounded: round(var(--terminal-line, 1em));
line-height: var(--terminal-line-rounded);

注：这种方式在部分旧版SCSS编译环境中可能仍存在解析问题，优先推荐前两种方法。

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