SCSS无法在函数中解析var(--x)，因其运行在构建阶段，而var()是浏览器运行时才解析的CSS特性；Sass编译器仅将var(--x)视为字符串，不识别、不计算、不校验类型，所有涉及CSS变量的运算必须交由calc()等CSS原生机制在运行时完成。
SCSS 无法在函数中解析 var(--x)，这不是配置或写法问题，而是执行阶段根本不同：SCSS 在构建时运行，var() 在浏览器里才生效。你不能指望 @function 读取一个此时还不存在的值。
为什么 var(--size) 在 @function 里直接报错或返回字符串
SCSS 编译器看到 var(--size) 就当普通字符串处理，不会去查 DOM 或 CSSOM。哪怕你把它塞进 calc()、lighten() 或 @if 判断里，结果都是类型不匹配或编译失败。
-
@if var(--size) > 16px→ SassError: “Expected number” -
$val: var(--size); color: lighten($val, 10%)→ 编译后变成color: lighten(var(--size), 10%)，浏览器不认识lighten()，样式失效 - 试图用
meta.type-of(var(--size))检查类型 → 返回string，不是number，后续计算全断
正确做法：把运行时逻辑交给 CSS，SCSS 只负责生成结构
你需要放弃“在 SCSS 里算出最终值”的思路，转为用 SCSS 控制哪些地方该用 var()、怎么拼接、如何降级。
- 所有动态值统一走
var(--xxx)，不要尝试赋给 SCSS 变量再复用 - 需要计算的地方（如
margin: calc(var(--space) * 2)），确保--space是带单位的合法值（8px、1rem），且只在 CSS 层面运算 - 降级值必须前置：
font-size: 16px; font-size: var(--font-size, 16px);，IE 才会取第一个 - 若需条件逻辑（比如暗色模式下改颜色），用
@media (prefers-color-scheme: dark)或 JS 动态切:root类名，别在 SCSS 里@if
插值 #{$var} 和 var(--x) 别混用
常见错误是以为 #{$spacing} 能和 var(--spacing) 互通。它们完全不在一个世界：
立即学习“前端免费学习笔记（深入）”；
-
--spacing: #{$spacing}✅ 正确：SCSS 把$spacing的值（如8px）插进去，生成静态 CSS 变量 -
width: #{$max-width}✅ 可行：但这是纯静态输出，失去响应能力 -
width: min(#{$max-width}, 100%)❌ 错误：SCSS 不支持min()，且#{$max-width}是字符串，不是运行时表达式 -
color: var(--text, #{$fallback})❌ 失效：Sass 不会展开$fallback到var()的第二个参数里
真正难的不是写对语法，而是得时刻分清哪段逻辑该在构建时定死，哪段必须留给浏览器现场算——一旦混淆，问题就从“编译不过”变成“看起来对、换设备就错”。
