直接写 url(./logo.png) 会失败，因为 css 变量不支持模板引擎式解析，--bg: url(./logo.png) 使浏览器在声明时即尝试解析路径，导致 background-image: var(--bg) 无法加载资源。
为什么直接写 url(./logo.png) 会失败
CSS变量不是模板引擎，--bg: url(./logo.png) 这种写法会让浏览器在声明时就解析 url()，结果变量值变成一个字符串字面量，而不是可加载的资源路径。后续用 background-image: var(--bg) 时，浏览器看到的是 url(./logo.png) 这个字符串，而非实际请求——背景空白，控制台报 Failed to load resource。
var(--img-path) 必须配合 url() 外层包裹
变量只存纯路径，使用时再套 url()，才能触发真正的资源加载：
-
:root { --icon-home: "./assets/icon-home.svg"; }—— 路径必须加引号（双/单均可），否则含空格或括号会解析失败 -
.nav-item.home { background-image: url(var(--icon-home)); }——url()在变量展开后才执行，此时路径才被当作资源地址处理 - 路径是相对于 CSS 文件位置计算的，不是 HTML 或 JS 所在目录
响应式切换时，@media 内必须同时定义变量和应用样式
只在媒体查询里改 :root 变量，但 background-image 声明在外部，会导致切换失效。真正起效的关键是作用域匹配：
- 错误写法：
:root { --bg-url: "a.jpg"; } @media (min-width: 768px) { :root { --bg-url: "b.jpg"; } .hero { background-image: url(var(--bg-url)); } }——.hero未被媒体查询包裹，仍用初始值 - 正确写法：
@media (max-width: 768px) { .hero { --bg-url: "hero-mobile.jpg"; } } @media (min-width: 769px) { .hero { --bg-url: "hero-desktop.jpg"; } } .hero { background-image: url(var(--bg-url)); } - 变量值不要带引号：
--bg-url: img/phone.jpg，否则url(var(--bg-url))会拼出非法语法url("img/phone.jpg")
多层背景或渐变切换，别用多个变量拼接
想实现背景图 + 渐变叠加，或动态换渐变方向/色标，不能把颜色、角度、路径拆成多个变量再组装——浏览器不支持运行时函数参数展开：
- 错误：
--grad-start: #ff6b6b; background: linear-gradient(45deg, var(--grad-start), #4ecdc4);—— Safari 和旧 Chrome 直接失效 - 正确：
--bg-gradient: linear-gradient(45deg, #ff6b6b, #4ecdc4); background-image: var(--bg-gradient);—— 整个渐变声明作为字符串存变量 - 多层背景用
background-image: var(--layer-1), var(--layer-2)可行，但 Safari 15.0–15.3 有 bug，会忽略第二层起的var()，需升级或降级处理
var() 在函数参数中展开的支持程度——这些地方稍一疏忽，就变成“代码写了但没生效”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
