为什么在SCSS中使用@each比@for更高效_分析遍历List与Map的实战案例-css教程-PHP中文网

@each 并不比 @for 更高效，二者编译性能一致，差异在于语义清晰度、可维护性与类型安全；@each 适合结构化数据遍历，@for 适用于纯数值范围。

为什么在scss中使用@each比@for更高效_分析遍历list与map的实战案例

在 SCSS 中，@each 并不比 @for “更高效”——编译时性能几乎一致，真正差异在于语义清晰度、可维护性与类型安全。盲目选 @each 反而容易因数据结构误用导致样式静默丢失。

@for 是数值范围展开，@each 是集合遍历，两者都发生在编译期，生成的 CSS 行数相同，不存在运行时开销差异。所谓“高效”，实际指：写对一次、改得清楚、查得明白。

@for $i from 1 through 5 的意图是“生成 5 个编号类”，但若需求变成“生成 sm、md、lg 三档类”，硬套 @for 就得额外映射数组或用 nth($list, $i)，多一层间接
@each $size, $value in $font-sizes 直接暴露键值对，变量名自带语义，无需注释说明 $i == 2 对应哪个尺寸
编译器对 @each 的类型检查更严格：传入空 map 或 null 会跳过整块（不报错），但传入非 list/map 类型（比如字符串）会直接报错："red" is not a list or map

传入 list 必须只用一个变量接收元素；传入 map 必须用两个变量（$key, $value），顺序不能颠倒。错写会导致编译失败或值错位。

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

正确遍历 list：@each $color in (red, green, blue) { .bg-#{$color} { background: $color; } }
错误写法：@each $key, $value in (red, green, blue) → 报错：Invalid syntax for @each: expected comma
正确遍历 map：@each $name, $size in (sm: 12px, lg: 24px)
错误写法：@each $size, $name in $map → $size 拿到的是 key（"sm"），$name 拿到的是 value（12px），语义全反

@for 要求起始值和结束值必须是数字，且不能带单位。一旦变量未定义、为空或含单位（如 1200px），编译直接中断。

错误：@for $i from $min to $max，而 $min 是 null → 报错："$min" is not a number
错误：@for $i from 1 to $breakpoint，而 $breakpoint: 1200px → 报错：Invalid null operation: "1200px" times "1"（后续计算单位乘法时炸）
安全做法：用 unitless($breakpoint) 剥离单位，或提前断言：@if type-of($min) == number and $min != null
@each 则无此问题——它不关心数值，只认结构，map 里存 1200px 或 "xl" 都能照常遍历

当 map 的 value 本身是嵌套结构（例如颜色组、断点配置），@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; } } }
用 @for 实现等效逻辑：需先 length($themes) 得长度，再 nth($themes, $i) 取项，再判断该项是否为 map，再二次遍历——代码膨胀、可读性差、易漏 @if 判断
更关键的是：nth($themes, 1) 返回的是 light (bg: #fff, text: #333) 这个 pair，不是纯 map，直接 @each 会报错，必须先 map-keys 提取再处理