用css变量控制background-size生成网格更高效，因结构与尺寸分离，主题切换时只需修改变量值即可自动响应，且能强制background-size与渐变stop联动对齐。
直接改 --grid-size 就能重设网格间距，不用动 background-image 或重复写多组渐变声明。
为什么用 CSS 变量控制 background-size 生成网格更高效
传统写法里，background-size: 20px 20px 是硬编码值，换尺寸就得全局搜替换；换成变量后，结构（渐变定义）和尺寸（--grid-size）彻底分离。比如主题切换时，只需在不同 :root 或媒体查询中覆盖变量值，所有网格自动响应——连 JS 都不用介入。
常见错误是只改了 background-image 里的渐变 stop 位置（如 rgba(0,0,0,.1) 1px），却忘了同步调 background-size，结果线条错位、间隙不均。变量能强制这两处联动。
- 变量必须带单位，写成
--grid-size: 24px，不能只写24 - 若需动态计算（如“格子大小 = 基础值 × 1.5”），必须用
calc(var(--grid-size) * 1.5)，不能省略calc() - IE 完全不支持 CSS 变量，需要 fallback：先写死一个
background-size，再在后面覆盖变量版
background-size 和 linear-gradient 的尺寸必须匹配
网格由两个正交的 linear-gradient（横线 + 竖线）叠加而成，每个渐变的“线条宽度”和“空白高度”之和，必须等于 background-size 的对应维度。否则会出现断线、重叠或漏格。
例如，想做 1px 白线 + 23px 透明区 → 单个渐变周期为 24px，那 background-size 就得是 24px 24px。如果变量设成 --grid-size: 30px，但渐变里还写 1px, transparent 1px，就会拉出稀疏错位的线。
- 推荐统一用变量控制 stop 位置：
linear-gradient(white 1px, transparent 1px)→ 改成linear-gradient(white calc(var(--line-width)), transparent calc(var(--line-width))) - 把线条粗细也抽成变量（如
--line-width: 1px），和--grid-size解耦，方便独立调整 - 多背景叠加时，
background-size值要用逗号分隔，顺序必须和background-image中渐变顺序严格一致
如何安全地在 linear-gradient 内引用变量
CSS 函数内部不支持裸变量插值，直接写 linear-gradient(90deg, #000, #000 var(--grid-size)) 会解析失败，浏览器静默忽略整条声明。
正确做法只有两种：要么让变量本身带单位并用于 background-size，要么在渐变参数里用 calc() 包裹变量。
- ✅ 正确（变量用于
background-size）：background-size: var(--grid-size) var(--grid-size) - ✅ 正确（变量用于渐变 stop）：
linear-gradient(white calc(var(--line-width)), transparent calc(var(--line-width))) - ❌ 错误（裸变量进函数）：
linear-gradient(white var(--line-width), transparent var(--line-width)) - ⚠️ 注意：
calc()里不能混用单位，calc(1px + var(--grid-size))合法，但calc(1em + var(--grid-size))会失效
真正难的不是写出来，而是让 --grid-size、--line-width、渐变 stop、background-size 四者始终对齐——漏掉任意一环，网格就“散架”。建议把这四个点打包成一个 CSS 自定义属性块，而不是零散定义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
