应单独封装 .stripe-bg() 混合而非塞入 .gradient-bg()，因条纹背景本质是重复渐变，参数逻辑（方向、条宽、间隙、周期）与单次线性渐变完全不同，混用易导致语义混乱、传参错误和渲染异常。
直接用 repeating-linear-gradient() 配合 Less 变量和混合，比写死 CSS 省事、易维护、还能动态调色——但别直接塞进 .gradient-bg() 里复用，得单独封装一个 .stripe-bg()。
为什么不能塞进 .gradient-bg() 混合里
条纹背景本质是「重复渐变」，和单次线性渐变（linear-gradient）语义不同，参数逻辑也不一样：
– linear-gradient 关注起止色与方向；
– repeating-linear-gradient 关键在「色标间距」和「周期长度」，比如 red 0%, red 10px, transparent 10px, transparent 20px 才能形成 10px 宽红条 + 10px 宽透明的规律重复。
混在一起会导致参数含义混乱，调用时容易传错单位或漏掉关键偏移。
- 强行复用两参数混合（如
@start-color,@end-color）无法表达「条宽」「间隙」「方向周期」三个核心维度 - 编译后若色标没对齐（如
red 0%, blue 5px, red 5px写成red 0%, blue 5px, red 6px），浏览器会补全为硬边，但视觉上可能错位或模糊 - 方向值仍需转义：传
@direction: ~"to bottom"，否则repeating-linear-gradient("to bottom", ...)是非法语法
.stripe-bg() 混合该怎么定义才实用
一个真正可配的条纹混合，至少要支持：条纹方向、主色、条纹宽度、间隙宽度、透明度微调。示例定义：
.stripe-bg(@direction: ~"to bottom", @color: #000, @stripe-width: 2px, @gap-width: 2px, @alpha: 100%) {
background-image: repeating-linear-gradient(
@direction,
fade(@color, @alpha) 0%,
fade(@color, @alpha) @stripe-width,
transparent @stripe-width,
transparent (@stripe-width + @gap-width)
);
}
-
@direction必须用~""转义，不然会被当字符串字面量 - 用
fade(@color, @alpha)替代手写rgba()，避免颜色函数（如darken()）在极值色上返回transparent导致意外空白 - 色标顺序必须严格：主色起始 → 主色结束 → 透明起始 → 透明结束，否则周期错乱
- 若要水平条纹，传
@direction: ~"to right"即可，别用90deg—— Safari 对角度语法兼容性略差
常见错误：条纹太细/看不见/变成纯色
现象背后几乎都是色标数值没对齐或单位缺失：
- 写了
red 0%, red 2, transparent 2, transparent 4—— 缺少单位（2px），Less 不报错但浏览器忽略整条声明 - 写了
red 0%, red 10px, transparent 10px, transparent 20px，但background-size没设或设太大，导致重复单元被拉伸成一片色块 - 用了
lighten(@color, 20%)处理浅底色，结果在#fff上返回无效值，编译后该色标消失，只剩transparent→ 整个背景变空 - 在调用前未定义
@primary等变量，或变量定义在混合之后，Less 编译时按字面量处理，@color变成undefined
进阶：生成多色条纹或响应式条纹
多色条纹（如红-蓝-绿循环）不适合用固定参数混合，改用 list + 递归更稳妥：
.stripe-multi(@stops, @i: 1) when (@i = length(@stops), 1, @i + 1)); // 拼接色标：@stop 0%, @stop 2px, @next-stop 2px, @next-stop 4px... } .stripe-multi(@stops);
响应式条纹的关键不是媒体查询，而是用 em 或 rem 单位定义 @stripe-width 和 @gap-width，让条纹随字体缩放——但要注意：Safari 对 repeating-linear-gradient 中的相对单位支持不稳定，生产环境建议仍用 px，靠 JS 动态注入媒体查询类来切换预设尺寸档位。
最易被忽略的一点：条纹背景必须搭配 background-size 才可控，而这个值不能由混合自动推导——它取决于你希望多少个条纹周期铺满容器，得手动设，比如 background-size: 4px 4px 对应上面 2px+2px 的周期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
