必须预先定义颜色列表变量$bg-colors，再用@each遍历生成类名；类名不能纯数字开头，需用index()获取唯一索引；避免循环内嵌套复杂逻辑，20个类约1kb，超50个应考虑css自定义属性；sass编译生成的类兼容ie8+。
用 @each 遍历颜色列表时，必须提前定义好完整列表
直接写 @each $color in (red, blue, green) 看似简单，但生成 20 种背景色时，手动写死颜色值既难维护又易出错。更实际的做法是预先定义一个包含 20 个颜色值的 Sass 列表变量，比如：
$bg-colors: #f5f5f5, #e0e0e0, #bdbdbd, #9e9e9e, #757575, #616161, #424242, #212121, #ffecb3, #ffe082, #ffd54f, #ffca28, #ffb300, #ffa000, #ff6d00, #ff3d00, #d81b60, #ad1457, #880e4f, #4a148c;否则
@each 会报错 “Invalid CSS after \"@each\": expected \"{\"”——这是 Sass 解析器发现括号内不是合法列表结构导致的。
生成类名时别用纯数字开头，CSS 类名不合法
如果写成 .bg-1 { background-color: nth($bg-colors, 1); } 这类规则，虽然编译能过，但类名 bg-1 是合法的；可一旦你尝试用 @for $i from 1 through length($bg-colors) 并拼出 .1、.2 就会出问题。所以用 @each 更安全，配合 index() 或额外计数器来控制命名：
@each $color in $bg-colors {
$idx: index($bg-colors, $color);
.bg-#{$idx} {
background-color: $color;
}
}注意：Sass 的 index() 返回第一个匹配项的位置，重复颜色会导致索引错乱，20 种颜色务必保证唯一。
避免在循环里嵌套复杂逻辑，性能和可读性都会下降
有人想在 @each 里加条件判断（比如跳过某个颜色）、生成多个属性、甚至嵌套另一个循环，这会让输出 CSS 膨胀且难以调试。真实项目中建议：
- 颜色列表本身做预处理（如用 JS 脚本生成 Sass 变量）
- 只在循环内做最简映射：类名 → 单一
background-color - 若需 hover/active 状态，另写一层 mixin 或用属性选择器扩展，别塞进
@each - 编译后检查 CSS 文件大小——20 个类大概 1KB，超过 50 个就该考虑 CSS 自定义属性方案了
IE 不支持 CSS 自定义属性，但 Sass 循环生成的类完全兼容老浏览器
这是很多人忽略的关键点：用 @each 输出的静态类（如 .bg-1、.bg-20）最终是标准 CSS 规则，IE8+ 全部支持。而如果改用 background-color: var(--bg-1) 配合 JS 注入，则 IE11 以下直接失效。所以当项目还需兼容旧环境时，Sass 编译期展开仍是更稳妥的选择。不过要注意：Sass 3.3+ 才支持 index()，旧版本得用 @for + nth() 模拟。
