css变量存储含空格字体名时必须将引号写入变量值本身，如"--font-main: \"helvetica neue\", sans-serif"；而padding等简写属性无法用单变量存多值，因var()仅作字符串替换，不触发语法重解析。
CSS变量无法直接存储含空格的多值属性（如 padding 或 font-family 的完整声明），但可以安全存储带空格的字体族字符串——前提是引号必须写进变量值里。
为什么 font-family: var(--font-main) 会失效？
浏览器把 --font-main: Helvetica Neue, sans-serif 解析成两个独立标识符：Helvetica 和 Neue,（逗号后带空格），导致整个字体链断裂。CSS变量只是字符串替换，不触发语法重解析，所以空格=分隔符，不是字体名的一部分。
- ✅ 正确：变量值本身包含双引号 ——
--font-main: "Helvetica Neue", sans-serif - ❌ 错误：靠外部加引号 ——
font-family: "var(--font-main)"（语法非法） - ⚠️ 注意：
sans-serif这类通用字体族不能加引号，但前面所有含空格的专有字体名都必须成对包裹
为什么 padding: var(--pad-xy) 一定失败？
padding 是简写属性，需要多个独立值（如 16px 24px），而 var() 展开后只提供一个“token”，浏览器把它当做一个未定义的自定义标识符处理，最终标记为 invalid。
- ✅ 可行：拆成多个变量 + 显式空格拼接 ——
padding: var(--pad-y) var(--pad-x) - ❌ 不行：试图用单个变量存多值 ——
--pad-xy: 16px 24px+padding: var(--pad-xy) - ? 调试技巧：在 DevTools 的 Computed 面板看
padding是否显示为invalid或空白
JS 动态设置带空格的字体变量时怎么避免引号翻车？
JS 字符串拼接容易漏掉内层引号，尤其当变量值本身含双引号时。关键不是转义，而是保证最终塞进 CSS 的字符串是合法字体声明。
- ✅ 推荐：用模板字符串 + 外层双引号包裹整个字体链 ——
el.style.setProperty('--font-ui', '"Inter", "SF Pro Display", system-ui') - ❌ 危险：只给部分字体加引号 ——
"Inter", SF Pro Display, system-ui（SF Pro Display被拆成三个词） - ? 小技巧：如果 JS 用单引号定义字符串，里面混双引号就不用转义，更不易出错
最易被忽略的点是：字体变量里的引号是值的一部分，不是语法修饰；而 padding 类变量根本不能走“单变量存多值”这条路——它和字体不是同一类问题，强行套用会卡在解析阶段。别试图让 var() 承担它设计上就不支持的角色。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
