SCSS变量未解析为实际值：CSS变量定义后函数运算报错

问题原因 #

你用var(--BaseFontSize, 10px)初始化SCSS变量$BaseFontSize，但SCSS是预编译工具，编译阶段会尝试计算($px / $BaseFontSize)，而var(--xxx)是CSS运行时变量，编译时SCSS无法解析它的具体数值，因此抛出运算未定义的错误。

解决方案 #

根据是否需要动态修改基准字号，分两种处理方式：

1. 需要动态调整基准字号（支持运行时修改） #

改用CSS calc() 处理运算，因为calc()支持解析CSS变量，运行时由浏览器计算结果。修改后的px-to-rem函数如下：

$BaseFontSize: var(--BaseFontSize, 10px);

@function px-to-rem($px) {
  // 提取px值的纯数字部分（如40px转为40）
  $px-number: $px / 1px;
  // 用calc实现动态运算，保留CSS变量的回退值
  @return calc(#{$px-number} / var(--BaseFontSize, 10) * 1rem);
}

// 使用示例
.className {
  padding: px-to-rem(40px);
}

编译后的CSS代码：

.className {
  padding: calc(40 / var(--BaseFontSize, 10) * 1rem);
}

浏览器运行时会根据--BaseFontSize的实际值（或回退值10）计算最终的rem大小，适合需要响应式调整、主题切换等动态场景。

2. 不需要动态调整基准字号（静态编译） #

如果不需要运行时修改基准字号，直接用纯SCSS变量定义默认值，同时可选在:root中定义对应的CSS变量（方便后续扩展）。这种方式SCSS编译阶段就能直接算出结果，性能更好：

// 定义纯SCSS变量作为基准字号
$BaseFontSize: 10px;
// 可选：将SCSS变量同步到CSS变量，方便后续复用
:root {
  --BaseFontSize: #{$BaseFontSize};
}

@function px-to-rem($px) {
  // SCSS编译阶段直接计算出具体rem值
  @return ($px / $BaseFontSize) * 1rem;
}

// 使用示例
.className {
  padding: px-to-rem(40px);
}

编译后的CSS代码：

:root {
  --BaseFontSize: 10px;
}
.className {
  padding: 4rem;
}

这种方式生成的CSS是固定的rem值，适合静态布局场景。

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