用css变量控制条纹尺寸更灵活，因实现结构与样式解耦，支持主题切换和响应式调整；需确保变量带单位、用calc()安全运算，并避免命名冲突。
直接改 --stripe-size 就能重设条纹宽高，无需重写整条 background-image 声明。
为什么用 CSS 变量控制条纹背景尺寸更灵活
传统条纹写法（如 repeating-linear-gradient）里，角度和尺寸硬编码在函数参数中，每次调整都要改整个值。换成变量后，尺寸逻辑和视觉声明解耦：一个变量管大小，样式类只负责结构。修改时只需更新 :root 或局部作用域的变量值，所有引用它的条纹自动响应——尤其适合主题切换、动态主题色或用户偏好设置场景。
常见错误是把变量直接塞进 repeating-linear-gradient() 里却不加单位，比如写成 repeating-linear-gradient(90deg, #000, #000 var(--stripe-size))，这会导致解析失败（CSS 函数内不支持裸变量插值）。必须用 calc() 包一层或确保变量本身带单位。
- 变量必须带单位（如
4px），不能只写数字 - 若需计算（如半宽条纹），用
calc(var(--stripe-size) / 2)，不能省略calc() - IE 完全不支持 CSS 变量，如需兼容，得 fallback 到预设类名方案
如何正确定义和使用 --stripe-size 变量
核心是让变量参与 background-size 和 repeating-linear-gradient 两个地方：前者控制整体重复单元大小，后者决定单个条纹宽度。两者必须匹配，否则出现错位或空白。
正确写法示例：
body {
--stripe-size: 8px;
background-image: repeating-linear-gradient(
90deg,
#333,
#333 calc(var(--stripe-size) * 1),
transparent calc(var(--stripe-size) * 1),
transparent calc(var(--stripe-size) * 2)
);
background-size: calc(var(--stripe-size) * 2) calc(var(--stripe-size) * 2);
}
说明：
-
background-size设为calc(var(--stripe-size) * 2)，对应渐变中一个完整周期（深色+透明） - 渐变里用
calc()确保单位运算安全，避免8px * 2这类非法写法 - 若要横向条纹，改角度为
0deg，同时把background-size的两个值顺序调换
background-size 变量在媒体查询中动态切换的坑
移动端小屏下条纹太密会糊成一片，需要增大 --stripe-size。但直接在 @media 里覆盖变量值，容易忽略继承链断裂问题——如果变量定义在某个组件类内部（如 .card { --stripe-size: 4px; }），媒体查询写在全局 :root 下就无效。
可靠做法是把变量声明放在可被媒体查询直接影响的作用域里：
- 全局适配：变量定义在
:root，媒体查询也作用于:root - 组件级适配：变量定义在组件类（如
.stripe-bg），媒体查询也针对该类写 - 切忌混用：不要在
:root设变量，又在.stripe-bg类里用媒体查询改它——子元素无法反向影响根变量
示例（组件级）：
.stripe-bg {
--stripe-size: 6px;
background-image: repeating-linear-gradient(90deg, #666, #666 calc(var(--stripe-size)), transparent calc(var(--stripe-size)), transparent calc(var(--stripe-size) * 2));
background-size: calc(var(--stripe-size) * 2) calc(var(--stripe-size) * 2);
}
<p>@media (max-width: 768px) {
.stripe-bg {
--stripe-size: 12px;
}
}</p>
background-size 变量与 performance 的隐性关系
看似只是改个数字，但频繁修改 --stripe-size（比如用 JS 每帧更新）会触发 background-image 重计算，导致 layout → paint 链路反复执行。Chrome DevTools 的 Performance 面板里能看到 Update Layer Tree 占比异常升高。
优化建议：
- 避免用
requestAnimationFrame持续驱动变量变更；动画优先走transform或opacity - 若真需动态条纹节奏（如加载动画），用
@keyframes动画控制background-position，而非重算background-size - 多背景叠加时，每个
background-size都独立受变量影响，变量数量一多，解析开销明显上升
最易被忽略的一点：变量名别起成 --size 这种泛用名，容易和其它模块冲突。统一用语义前缀，比如 --stripe-bg-size，哪怕多敲几个字，后期排查样式污染时能省半小时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
