@for 适合生成固定数量带序号的类名，如 .list-item-1 至 .list-item-5；$i 从 1 开始，用 through 包含终点，插值必须写成 #{$i}，补零需手动处理。
用 @for 循环生成带序号的列表项样式
需要为 .list-item-1 到 .list-item-5 一类类名批量生成不同颜色或缩进时，@for 最直接。它适合明确数量、需访问索引的场景。
常见错误是把 $i 当作从 0 开始——Sass 的 @for $i from 1 through 5 是闭区间，$i 值就是 1、2、3、4、5，不用加 1。
- 用
through（含终点）而非to（不含终点），避免少生成一项 - 变量插值必须写成
#{$i}，漏掉#或大括号会报错Invalid CSS after "...": expected "{", was ";" - 如果序号要补零（如
01、02），Sass 本身不提供格式化函数，得手动拼或引入sass:math配合字符串处理
@for $i from 1 through 3 {
.list-item-#{$i} {
margin-left: $i * 10px;
}
}
用 @each 处理带语义的列表配置项
当列表项有不同含义（比如状态：success / warning / error），用 @each 比硬编码更易维护。它遍历 map 或 list，天然支持键值对映射。
容易踩的坑是 map 键名带连字符（如 "list-success"）时，不能直接当 CSS 类名用——Sass 不会自动转义，得用 #{} 插值包裹整个字符串。
- map 的 key 如果是字符串，必须加引号；如果是无引号标识符（如
success），会被当成变量解析 - 多个属性想动态赋值，建议把整套规则写进 map 里，而不是在
@each里堆条件判断 - IE 不支持 CSS 自定义属性，如果用
--list-color配合@each生成，记得 fallback
$list-states: (
"success": #28a745,
"warning": #ffc107,
"error": #dc3545
);
<p>@each $state, $color in $list-states {
.list-#{$state} {
color: $color;
}
}</p>
用 @function 封装列表层级缩进逻辑
嵌套列表（如三级菜单）需要按深度计算 padding-left，硬写三层 @for 太冗余。@function 能把计算逻辑抽出来，复用性高，也方便测试边界值。
注意 Sass 函数返回值类型必须明确：如果返回数字就别混着单位写，否则调用处加单位会出错，比如 return 20px 和 return 20 在 padding-left: list-indent(2) * 1em 里行为完全不同。
- 函数参数建议加默认值，比如
$depth: 1，避免调用时漏传报Missing argument - 不要在函数里写
@warn或修改全局变量，函数应保持纯计算 - 如果缩进需响应式变化（如移动端减半），函数里不宜直接读
breakpoint，应把断点值作为参数传入
@function list-indent($depth) {
@return $depth * 20;
}
<p>.list-item {
padding-left: list-indent(2) + px;
}</p>
Sass 循环生成的 CSS 体积与浏览器兼容性
循环本身不增加运行时开销，但生成的 CSS 行数会线性增长。10 层嵌套 + 5 种状态可能产出 50+ 条规则，gzip 后影响不大，但开发者工具里调试会变慢。
真正容易被忽略的是 CSS 选择器权重和 specificity 累积问题：用 .list-item-1:hover + .list-item-1.active 这类组合，比单个 .list-item 的权重高，后续覆盖成本上升。
- 生成前先评估是否真需要独立类名——很多时候用
:nth-child(odd)或 data 属性更轻量 - Sass 3.5+ 支持
@at-root提升作用域，避免嵌套过深导致选择器爆炸 - 如果目标环境要兼容 IE11，别在循环体里用
calc()动态算值，IE 对 calc 解析不稳定
循环不是银弹，它解决的是“重复结构”，不是“动态行为”。真要 runtime 控制样式，还是该交给 JS classList 或 CSS 自定义属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
