@each 并不比 @for 更高效，二者编译性能一致，差异在于语义清晰度、可维护性与类型安全；@each 适合结构化数据遍历，@for 适用于纯数值范围。
在 SCSS 中，
并不比
“更高效”——编译时性能几乎一致，真正差异在于语义清晰度、可维护性与类型安全。盲目选
反而容易因数据结构误用导致样式静默丢失。
为什么@each不是“性能更快”，而是“意图更明确”
是数值范围展开，
是集合遍历，两者都发生在编译期，生成的 CSS 行数相同，不存在运行时开销差异。所谓“高效”，实际指：写对一次、改得清楚、查得明白。
的意图是“生成 5 个编号类”，但若需求变成“生成
、
、
三档类”，硬套
就得额外映射数组或用
，多一层间接
直接暴露键值对，变量名自带语义，无需注释说明
对应哪个尺寸
编译器对
的类型检查更严格：传入空
或
会跳过整块（不报错），但传入非
/
类型（比如字符串）会直接报错：
@each遍历list时常见错误：单变量 vs 双变量写法混淆
传入
必须只用一个变量接收元素；传入
必须用两个变量（
），顺序不能颠倒。错写会导致编译失败或值错位。
正确遍历
：
错误写法：
→ 报错：
正确遍历
：
错误写法：
→
拿到的是 key（
），
拿到的是 value（
），语义全反
@for处理非数值边界时极易崩溃
要求起始值和结束值必须是数字，且不能带单位。一旦变量未定义、为空或含单位（如
），编译直接中断。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
错误：
，而
是
→ 报错：
错误：
，而
→ 报错：
（后续计算单位乘法时炸）
安全做法：用
剥离单位，或提前断言：
则无此问题——它不关心数值，只认结构，
里存
或
都能照常遍历
嵌套结构下@each必须分层解构，@for无法替代
当 map 的 value 本身是嵌套结构（例如颜色组、断点配置），
可自然分层，
则需手动索引 + 类型判断，极易出错。
示例数据：
用
安全解构：
用
实现等效逻辑：需先
得长度，再
取项，再判断该项是否为
，再二次遍历——代码膨胀、可读性差、易漏
判断
更关键的是：
返回的是
这个 pair，不是纯 map，直接
会报错，必须先
提取再处理
真正该警惕的不是性能，而是“用
硬扛语义场景”：当你发现自己在循环里反复
、
、
判断时，大概率该换
了。而反过来，若只是生成
到
这类纯序号类，
更直白，也更难写错。
@each@for@each@for@each@for $i from 1 through 5smmdlg@fornth($list, $i)@each $size, $value in $font-sizes$i == 2@eachmapnulllistmap"red" is not a list or maplistmap$key, $valuelist@each $color in (red, green, blue) { .bg-#{$color} { background: $color; } }@each $key, $value in (red, green, blue)Invalid syntax for @each: expected commamap@each $name, $size in (sm: 12px, lg: 24px)@each $size, $name in $map$size"sm"$name12px@for1200px@for $i from $min to $max$minnull"$min" is not a number@for $i from 1 to $breakpoint$breakpoint: 1200pxInvalid null operation: "1200px" times "1"unitless($breakpoint)@if type-of($min) == number and $min != null@eachmap1200px"xl"@each@for$themes: (light: (bg: #fff, text: #333), dark: (bg: #111, text: #eee));@each@each $theme-name, $theme-map in $themes { @each $prop, $val in $theme-map { .#{$theme-name}-#{$prop} { color: $val; } } }@forlength($themes)nth($themes, $i)map@ifnth($themes, 1)light (bg: #fff, text: #333)@eachmap-keys@fornthindextype-of@each.col-1.col-12@for