@each循环未生成css最常见原因是数据结构为空或类型不匹配，如空list/map、null/undefined变量导致静默跳过；需用@debug检查长度或键名，并确保map定义正确、value非null/空字符串、类型匹配用途。
为什么@each循环没生成任何CSS
最常见原因是传入的数据结构为空或类型不匹配。Sass的@each遇到空list、空map、null或undefined变量时，会静默跳过整个块——不报错，也不输出一行CSS。
检查方法很简单：在@each前加一句@debug length($your-list)或@debug map-keys($your-map)。如果输出0或()，就坐实了数据源头问题。
- 从外部文件
@import配置时，路径写错或文件未导出$colors变量，会导致变量为null - 把
$map: (a: 1, b: 2)误写成$map: a: 1, b: 2（漏括号），Sass会当成两个独立语句，$map实际未定义 - 用
@each $key, $value in $map遍历list（比如(red, blue)），会直接编译失败：Sass要求map必须用两个变量接收
@each遍历map时只输出一半样式
典型表现是：Map里写了5个键值对，但CSS里只出来2个类。根本原因往往是$value里混入了非法值——比如map中某个value是null、""（空字符串）或0，而你在样式声明里用了color: $value这种直接赋值。
Sass允许null参与@each循环，但它在属性值位置会被编译成空字符串，导致整条CSS规则被浏览器忽略（例如color: ;无效）。
- 用
@if not ($value == null) and ($value != "")提前过滤掉脏数据 - 避免在
map定义里写"disabled": null，改用占位值如"disabled": transparent或干脆删掉该键 - 如果
$value是嵌套map（如(light: #eee, dark: #333)），直接background-color: $value会报错，必须先解构
生成的类名和HTML里写的对不上
这不是@each的问题，而是插值拼接逻辑和实际使用场景脱节。比如@each $name, $color in $colors { .text-#{$name} { color: $color; } }生成了.text-primary，但你在HTML里写的是class="text-primary-500"——多出来的-500让选择器完全失效。
更隐蔽的情况是大小写或连字符不一致：$colors里键名是"BgRed"，但插值写成.bg-#{$name}，结果生成.bg-BgRed，而HTML用的是class="bg-red"。
- 统一约定键名全部小写+短横线，如
"primary"、"dark-blue" - 插值时别擅自加前缀/后缀，除非你明确控制HTML端也同步改写
- 用
@debug ".text-#{$name}"打印生成的类名，直接复制到浏览器开发者工具里搜索验证
明明写了@each却编译报错“Invalid CSS”
错误通常不在@each语法本身，而在循环体内引用了未定义变量或非法表达式。比如@each $size in $font-sizes { .fs-#{$size} { font-size: $size * 1rem; } }——如果$size是字符串"lg"，$size * 1rem就会崩：Sass不能把字符串和单位相乘。
另一个高频雷区是content属性拼接Unicode：写content: "#{$val}"会输出带引号的字符串，浏览器当普通文本渲染；必须用content: unquote('"\#{$val}"')才能变成真正的字符。
- 确保
map里的value类型和用途匹配：颜色值用真实颜色类型（#ff0000），尺寸用带单位数值（1.25rem），图标码点用字符串（"e901"） - 涉及
content、url()等需转义的场景，优先用unquote()或str-replace()处理，别硬拼 - 用
@debug type-of($value)确认值的实际类型，比猜靠谱得多
真正麻烦的不是循环写不对，而是数据源头不可靠、命名约定不统一、类型混用还缺乏校验。这些地方一旦出问题，@each只会安静地沉默，连warning都不给。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
