scss中@each用于编译期遍历列表或地图：列表用@each $item in (a,b,c)，地图用@each $key, $value in (k: v)；@for适用于数字范围生成类名；@while因变量不可重赋值且无递归支持，极少实用。
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配置还脆弱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
