Sass无法在编译期解析var(--x)，因其是浏览器运行时函数，Sass解析器根本不识别该token；所有涉及CSS变量的计算必须交由calc()在CSS层执行，Sass仅能通过#{$var}插值注入静态值。
因为 Sass 运行在构建阶段，根本“看不见” CSS 变量（var(--size)），它不是 Sass 能解析或计算的值，而是浏览器在运行时才处理的表达式。直接写 var(--size) * 2 或 100px / var(--gap) 必然报错或产出非法 CSS。
为什么 var(--x) 在 Sass 函数里直接报错？
Sass 解析器压根不识别 var() 这个 token——它既不是 Sass 变量，也不是合法的 Sass 表达式。比如下面这段代码：
@function pxToRem($px) {
$base: var(--base-font-size); // ❌ Sass 报错：Unrecognized input
@return #{$px / $base} + rem;
}错误不是语法写错，是 Sass 根本没走到“计算”那步，就在词法分析阶段卡死了。
-
var(--base-font-size)是运行时行为，Sass 编译时:root都还没挂载，document是undefined - 你不能对 CSS 变量做
@if $base > 16px、传给lighten()，或塞进math.div() - 所有涉及
var()的计算，必须交给calc()，留在 CSS 层执行
怎么让 rem 或 % 动态响应 CSS 变量？
放弃“Sass 算完再输出”，改用 calc() 把除法逻辑保留在浏览器端：
立即学习“前端免费学习笔记（深入）”；
Openclaw Token Memory Optimizer
下载
{"answer":"OpenClaw Agent 优化套件，防止令牌泄露与上下文膨胀。适用于需实现后台任务隔离或重置与摘要工作流（RAG）的场景。"}
@mixin responsive-rem($px) {
font-size: calc(#{$px} / var(--base-font-size) * 1rem);
}编译结果是合法 CSS：font-size: calc(16 / var(--base-font-size) * 1rem);，每次重绘都重新求值。
-
--base-font-size必须是纯数字（如16）或带单位值（如16px），否则除法失效 - 别写
calc(#{$px} / var(--base-font-size)rem)——rem不能紧贴)，会解析失败 - 如果 JS 动态改了
--base-font-size，这个calc()会立刻响应，Sass 做不到这点
如何把 Sass 变量安全注入到 CSS 自定义属性中？
用 #{$var} 插值，这是唯一能打通编译期和运行时的方式：
$primary: #007bff;
:root {
--primary: #{$primary};
--space-md: #{$spacing-md};
}注意这些细节：
- 漏掉
#{}直接写--primary: $primary;→ Sass 跳过整行，DevTools 里看不到该变量 -
var(--text, $fallback)是无效写法，$fallback不会被替换，得先转成 CSS 变量：var(--text, var(--fallback-text)) - 插值内支持 Sass 计算：
--line-height: #{1.5 * 1};，但这是编译期算的，不是calc()
为什么 calc(100% - $gap) 编译后变成 calc(80%)？
因为 Sass 把 $gap 当作自己的变量提前运算了，而不是留给浏览器。比如 $gap: 20px，Sass 可能直接算出 100% - 20px = 80%（单位被强制转换），生成非法 CSS。
- 必须写成
calc(100% - #{$gap})，才能原样输出calc(100% - 20px) - 空格和单位仍要守规矩：
calc(100% - #{$gap})✅，calc(100%-#{$gap})❌（缺空格，整条被浏览器忽略） -
$gap定义时就要带单位：$gap: 20px，不能是$gap: 20，否则输出calc(100% - 20)，非法
真正容易被忽略的是：Sass 和 CSS 变量生活在两个完全隔离的时间层——一个在构建时死掉，一个在运行时活过来。强行让它们“一起算”，只会两边都失灵。要么全交给 calc()，要么全用 Sass 变量，混用时插值只是“搬运工”，不是“翻译器”。
