用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 自定义属性块，而不是零散定义。