SCSS 不解析 var()，逗号必须手写在 var() 内部；字符串拼接 fallback 会触发参数解析导致错误；正确做法是将带逗号的 fallback 值直接写死在 var() 中，不通过 SCSS 插值。
SCSS 本身不解析 var()，它只是原样输出字符串。所以“在 SCSS 中输出包含逗号的 CSS 变量值”，本质是让编译后的 CSS 里出现形如 color: var(--foo, #333) 这样的合法语法——而逗号必须出现在 var() 函数内部，不能由 SCSS 拼接生成。
为什么不能用 SCSS 字符串拼接生成 var() 的 fallback
很多人尝试这样写：
$fallback: "#333";
.foo { color: var(--foo, #{$fallback}); }
看起来没问题，但一旦 $fallback 值里带逗号（比如 "rgba(0,0,0,0.5)"），SCSS 会把它当多个参数传给 var()，导致编译报错或输出非法 CSS：
-
var(--foo, rgba(0,0,0,0.5))→ SCSS 把0,0,0,0.5解析成四个独立参数，语法错误 - 即使侥幸通过，浏览器收到的是
var(--foo, rgba(0 0 0 0.5))（空格分隔），CSS 解析失败
正确做法：fallback 必须写死在 var() 内部，不经过 SCSS 插值
所有合法的 var() fallback 都得手写进引号外的函数体里，SCSS 只负责包裹、组织，不参与值构造：
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
color: var(--text-color, #333); - ✅ 正确：
background: var(--bg, linear-gradient(to right, red, blue)); - ❌ 错误：
color: var(--text-color, #{$fallback});（$fallback是变量） - ❌ 错误：
color: var(--text-color, #{"#333"});（#{"..."}也不行，仍触发参数解析）
SCSS 对 var() 完全透明——它既不校验，也不拆解，只当普通字符串处理。你写的每一个字符，都会原样落到 CSS 输出里。
需要动态 fallback？改用 :root + JS 注入，而非 SCSS 变量
如果你真需要运行时决定 fallback（比如根据主题切换深色/浅色默认值），SCSS 不是合适层：
- 不要试图用
@if或@function生成不同var()表达式——它们只能在编译时起作用，无法响应用户操作 - 应该把 fallback 值写进 HTML 或 JS：
<html style="--text-color: #333">，然后 CSS 里只写color: var(--text-color); - 或者用 JS 动态设置：
document.documentElement.style.setProperty('--text-color', '#333');
SCSS 的职责是组织结构、复用逻辑、生成静态 CSS；带逗号的值属于 CSS 运行时语义，硬塞进编译流程只会失控。
最易被忽略的一点：哪怕你用了 #{""} 或 unquote()，只要最终生成的字符串落在 var() 的第二参数位置，SCSS 解析器仍会按函数调用规则切分逗号。唯一可靠方式，就是让逗号从一开始就不经过 SCSS 的“参数识别”环节——也就是直接手写。
