用 sass @for 循环生成多层 linear-gradient 实现精准等距条纹，每层独立控制 position 避免重叠漏缝；推荐 px 单位统一、显式设置背景尺寸；复杂场景用 map 管理配置；background-blend-mode 需与所有图层同声明且顺序严格对应。
用 @for 循环叠加多个 linear-gradient 实现密集条纹
纯 CSS 写 10 条以上等距条纹，手动列 background-image 几乎不可维护；Sass 的 @for 能把重复的渐变声明压缩成几行逻辑。关键不是“多写几个渐变”，而是控制它们在空间上不重叠、不漏缝、单位统一。
实操建议：
- 每条条纹用一个 linear-gradient，方向固定（比如 90deg），起止色相同，靠 background-position 偏移定位
- 条纹宽度和间距必须用同一单位（推荐 px），避免 12 和 12px 混用导致计算错位
- 总背景高度/宽度需显式设为 100% 或具体值，否则 background-size 无参照系
- 示例：生成 8 条竖向红白条纹，宽 4px，间距 4px
@for $i from 1 through 8 {
$offset: ($i - 1) * 8px;
.stripe-#{$i} {
background-image: linear-gradient(90deg, #e74c3c 50%, transparent 0);
background-size: 8px 100%;
background-position: $offset 0;
}
}
为什么不能只靠 background-size + repeat 实现非均匀条纹
常见翻车点：想用单个 linear-gradient(90deg, red 2px, transparent 0, transparent 4px) 配 background-size: 8px 100% 搞定——结果条纹边缘模糊、颜色渗出、不同浏览器渲染不一致。
原因：
- 渐变色标位置是相对百分比，2px 在 background-size: 8px 下被解释为 25%，但实际像素值会随容器缩放浮动
- transparent 0 和 transparent 4px 之间没有硬边界，浏览器插值渲染导致灰阶过渡
- 多层叠加时，各层 background-position 若未对齐到像素网格，会出现 1px 锯齿
正确做法：每层独立控制起点，用整数 px 偏移，杜绝百分比依赖。
用 map 存储多组条纹配置，避免循环嵌套爆炸
当条纹要分区域（比如 header 用细密灰条，card 用宽距蓝条），硬写多个 @for 会让文件臃肿。用 map 把配置收拢更可控。
实操建议：
- 定义 $stripes: ("header": (color: #95a5a6, width: 2px, gap: 2px, count: 6), "card": (color: #3498db, width: 6px, gap: 12px, count: 4))
- 外层 @each $region, $config in $stripes，内层 @for $i from 1 through map-get($config, count)
- 所有计算基于 map-get($config, width) 和 map-get($config, gap)，不散落魔法数字
- 注意：Sass 里 map-get() 返回值类型需校验，比如 map-get($config, width) 必须带单位，否则加减运算失败
background-blend-mode 叠加条纹时的声明陷阱
想让条纹和底层渐变混合出纹理感？background-blend-mode 必须和所有图层写在同一 background 声明里，拆成多行无效。
错误写法：
.mixed { background-image: linear-gradient(...); }<br>
.mixed { background-blend-mode: multiply; } → 完全不生效正确结构：
- 所有条纹层 + 底层渐变，全部塞进一个 background
- background-blend-mode 值数量必须等于图层数，顺序严格对应
- 底层不能用 background-color，得用 linear-gradient(#fff, #fff) 占位，否则不参与混合
- 示例中若叠加 3 层条纹 + 1 层底色，则 background-blend-mode: multiply, multiply, multiply, normal
最易忽略的是：Sass 编译后 CSS 语法合法，但浏览器是否支持 blend mode 取决于用户环境；iOS Safari 15.4 之前对 background-blend-mode 支持不完整，上线前必须真机验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
