SASS 是编译时预处理器，而 CSS 自定义属性（如 --base-font-size）仅在浏览器运行时生效；二者处于完全不同的执行阶段，因此无法在 SASS 函数中通过 var(--base-font-size) 动态获取其值并参与计算。
sass 是编译时预处理器，而 css 自定义属性（如 `--base-font-size`）仅在浏览器运行时生效；二者处于完全不同的执行阶段，因此无法在 sass 函数中通过 `var(--base-font-size)` 动态获取其值并参与计算。
在现代前端开发中，我们常希望实现「响应式根字号 + rem 布局」的灵活方案：例如通过 JavaScript 动态设置 :root 下的 --base-font-size，再让所有 rem 单位自动按比例缩放。但一个常见误区是试图在 SASS 中“读取”该 CSS 变量用于数学运算——这在技术上根本不可行。
❌ 为什么 var(--base-font-size) 在 SASS 函数中无效？
SASS（或 SCSS）代码在构建阶段（build-time）就被编译为纯 CSS，此时浏览器尚未加载、DOM 尚未挂载、JavaScript 也未执行，document.documentElement.style.setProperty() 更是遥不可及。而 var(--base-font-size) 是一个运行时（run-time）的 CSS 表达式，仅在浏览器渲染引擎解析 CSS 时才被求值（且不支持在 @function 或 calc() 外的任意上下文中参与 SASS 编译期运算）。
因此，以下写法注定失败：
@function pxToRem($pxValue) {
$baseFont: var(--base-font-size); // ⚠️ 错误！SASS 不认识 var()，也不会等待 JS 设置
@return #{$pxValue / $baseFont} + rem;
}它实际编译为：
立即学习“前端免费学习笔记（深入）”；
.n-code-input-field {
border-radius: 16/var(--base-font-size)rem; /* ❌ 非法 CSS，浏览器忽略 */
}✅ 正确解决方案：分离关注点，用纯 CSS 实现动态 rem 计算
既然 SASS 无法桥接运行时变量，就应放弃「在 SASS 中做除法」的思路，转而利用 CSS 原生能力——calc() + rem 的组合天然支持动态响应：
✅ 推荐做法：CSS 端统一用 calc() 换算，SASS 仅作语法糖封装
// _mixins.scss
@mixin rem-border-radius($px) {
border-radius: calc(#{$px} / var(--base-font-size) * 1rem);
}
// 使用示例
.n-code-input-field {
@include rem-border-radius(16);
}编译后生成合法 CSS：
.n-code-input-field {
border-radius: calc(16 / var(--base-font-size) * 1rem);
}✅ 浏览器会在每次样式计算时实时读取 --base-font-size（例如 16），得出 1rem；若 JS 后续改为 20，则自动变为 0.8rem —— 完全响应式，无需重新编译。
✅ 补充：确保 --base-font-size 是无单位数值（关键！）
你的 JS 设置必须传入纯数字字符串（不含 px/rem）：
export const changeBaseFontSize = (newSize: string) => {
// ✅ 正确：设置为纯数字，如 "16"、"20"
document.documentElement.style.setProperty("--base-font-size", newSize);
};并在 :root 中提供安全 fallback（防止未初始化时计算异常）：
:root {
--base-font-size: 16; // fallback for initial render
}⚠️ 注意事项与最佳实践
- 不要混用单位：--base-font-size: 16px 是错误的，calc(16 / 16px) 会报错；必须是无单位数值。
- 避免 SASS 运行时幻想：所有 @function、@if、$variable 都在编译期固化，无法感知未来 DOM 状态。
- 性能友好：calc() 由浏览器高度优化，频繁修改 --base-font-size 不会导致重排，仅触发重绘。
-
渐进增强：对不支持 calc() 的极老浏览器（IE10–），可搭配 @supports 提供降级：
.n-code-input-field { border-radius: 1rem; // fallback @supports (border-radius: calc(1rem)) { border-radius: calc(16 / var(--base-font-size) * 1rem); } }
总结
SASS 和 CSS 自定义属性分属两个时空：前者编译于构建流水线，后者活跃于用户浏览器。理解这一根本边界，就能避开「用 SASS 读取 CSS 变量」这类经典陷阱。真正健壮的动态 rem 方案，是让 SASS 负责生成符合规范的 calc() 表达式，把计算权完整交还给 CSS 引擎——简洁、高效、可维护。
