解决SASS pxToRem函数无法使用:root动态变量计算的问题

问题详情 #

我通过JS函数动态修改:root中定义的--base-font-size变量：

export const changeBaseFontSize = (newSize: string) => {
  document.documentElement.style.setProperty("--base-font-size", newSize);
};

调用时传入数值字符串：

changeBaseFontSize("16");

为实现px转rem，我编写了如下Sass函数：

@function pxToRem($pxValue) {
  $baseFont: var(--base-font-size);
  $remValue: #{$pxValue / $baseFont};
  @return $remValue + rem;
}

在SCSS中调用该函数：

.n-code-input-field {
  border-radius: pxToRem(16);
}

但编译后生成的CSS样式无效：

.n-code-input-field {
    border-radius: 16/var(--base-font-size)rem;
}

只有将$baseFont设为固定值16时，函数才能输出正确的1rem，样式正常生效。

问题根源 #

Sass是预编译工具，在编译阶段无法识别CSS自定义变量（var(--xxx)），会将其当作普通字符串处理。因此$pxValue / $baseFont的运算实际是字符串拼接，最终输出了无效的CSS表达式。

修复方法 #

改用CSS原生的calc()函数实现动态计算，调整Sass函数写法：

写法一 #

@function pxToRem($pxValue) {
  @return calc(#{$pxValue} / var(--base-font-size)) * 1rem;
}

编译后生成的有效CSS：

.n-code-input-field {
    border-radius: calc(16 / var(--base-font-size)) * 1rem;
}

写法二（更简洁） #

@function pxToRem($pxValue) {
  @return calc(#{$pxValue}rem / var(--base-font-size));
}

编译后生成的有效CSS：

.n-code-input-field {
    border-radius: calc(16rem / var(--base-font-size));
}

这两种写法都能让浏览器在运行时通过calc()解析CSS变量并完成计算，得到正确的rem值。

注意：调用changeBaseFontSize时，传入的数值不需要带单位（比如传"16"而非"16px"），才能和calc()中的运算逻辑匹配。

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