CSS实现循环遍历：SCSS列表与地图处理指南

本文深入解析了SCSS中三大循环指令——@each、@for与@while的核心用法、本质区别及高频陷阱：明确指出SCSS所有“循环”均发生在编译期而非运行时，是静态展开而非动态执行；详述@each如何安全遍历列表与地图（强调语法差异、嵌套大括号必要性及常见报错根源），@for如何精准生成索引类名并规避to/through区间误区，同时直言@while因变量不可重赋值、无递归支持且易触发编译限制，在实际项目中几乎无实用价值；更进一步揭示地图嵌套的取值局限、null风险与扁平化设计必要性，并点破团队协作中键名变更缺乏类型校验的隐性痛点——帮你避开90%的SCSS循环误用，写出真正健壮、可维护的样式逻辑。

SCSS里怎么用@each遍历列表和地图

SCSS没有运行时循环，但@each能在编译期展开结构化数据——它不是“执行”循环，而是把每项转成独立CSS规则。这点常被误以为能动态生成样式，实际是静态展开。

常见错误：把@each当JavaScript的forEach用，试图在运行时响应数据变化；或混淆列表（()）和地图（(key: value)）语法，导致编译报错Invalid CSS after "...": expected "{", was ")"。

• 列表遍历：用@each $item in (a, b, c)，每次$item取一个值
• 地图遍历：用@each $key, $value in (red: #f00, blue: #00f)，必须写两个变量接收
• 嵌套时别漏{}：@each后紧跟块级作用域，缺大括号会中断编译

用@for按数字范围生成类名，比如.col-1到.col-12

@for适合需要索引控制的场景，比如栅格系统、字体大小阶梯、z-index层级。它不处理数据结构，只管从$i开始数到$end（含），支持from ... through（闭区间）和from ... to（开区间）。

容易踩的坑：to会少生成最后一项，比如@for $i from 1 to 4只出1,2,3；还有人把变量名写成$i: 1（赋值语法），应为$i from 1。

• 生成列宽：@for $i from 1 through 12 { .col-#{$i} { width: percentage($i / 12); } }
• 避免硬编码上限：用$grid-columns: 12变量替代字面量，方便后期调整
• 性能无影响：所有展开都在编译时完成，输出CSS不含任何逻辑

为什么不能用@while做复杂逻辑，比如递归计算颜色明度

@while存在，但极少实用。SCSS不支持函数式递归、无状态变量重赋值（$var: $var + 1非法），且编译器对循环深度有限制（通常几百层就报错）。想调色？直接用lighten()/darken()这类内置函数更稳。

典型误用：写@while $level > 0 { ... $level: $level - 1 }，结果编译失败或无限卡住——因为SCSS变量是常量，$level: $level - 1语法不合法，必须用@for或预定义序列替代。

• 替代方案：把明度步进做成列表(0%, 10%, 20%)，再用@each展开
• 真要动态算？交给CSS自定义属性+JS，SCSS只负责静态基线样式
• @while仅适合极简单计数，且必须确保终止条件可被静态推断

地图嵌套与map-get取值的实际约束

SCSS地图支持多层嵌套，但map-get只能取一级键值。想拿(theme: (color: (primary: #007bff)))里的primary，得连写两次map-get：map-get(map-get($config, theme), color)。没人愿意这么写，所以实际项目中倾向扁平化设计。

另一个坑：map-get查不到键时返回null，而null参与运算会崩（比如color: map-get($colors, missing) + #000报错），必须配合@if判空。

• 安全取值写法：$c: map-get($colors, primary); @if $c { color: $c; }
• 嵌套地图建议用命名空间前缀代替层级，如$color-primary、$color-secondary
• 地图键名别用变量插值（map-get($m, #{$key})），编译期无法解析，会当字面量处理

真正麻烦的不是语法，而是团队协作时地图结构缺乏类型提示——改一个键名，所有map-get调用都得手动搜，没编译检查。这点比JSON配置还脆弱。

理论要掌握，实操不能落！以上关于《CSS实现循环遍历：SCSS列表与地图处理指南》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！