@each 仅静态生成css规则，不实现自适应；自适应依赖预设断点、媒体查询和类名组合，且必须用 @each $key, $val in $map 正确解构map，否则类名拼接失败或循环静默跳过。
@each 本身不产生“自适应”，它只是编译期静态生成 CSS 规则。所谓自适应布局，实际是靠预设断点 + 媒体查询 + 类名组合实现的，@each 只负责把这堆规则批量写出来——写错结构或单位，生成的类就全失效。
用 @each 遍历 map 时必须解构键和值，不能只写一个变量
断点配置本质是映射（map），比如 $breakpoints: ("sm": 576px, "md": 768px, "lg": 992px)。若写成 @each $bp in $breakpoints，Sass 会把整个 "sm": 576px 当作单个值传入，后续拼类名 .col-#{$bp}-6 就直接报错：“Invalid CSS after 'col-': expected class name”。
正确写法是：@each $key, $val in $breakpoints，这样 $key 是 "sm"（字符串，可用于类名），$val 是 576px（带单位，可用于 min-width）。
两层 @each 才能合理生成响应式栅格类
外层遍历断点，内层遍历列数，避免每个类都套一次 @media 导致 CSS 膨胀：
@each $key, $val in $breakpoints {
@media (min-width: $val) {
@each $i from 1 through 12 {
.col-#{$key}-#{$i} {
flex-basis: calc(#{$i} / 12 * 100%);
}
}
}
}
- 如果反过来：内层遍历断点，外层遍历列数，结果是
.col-6类里塞进全部@media，体积翻三倍且无法被 Dart Sass 合并 -
$i from 1 through 12用@for更自然，因为列数是纯数字序列；但断点必须用@each配合 map，否则语义丢失 - 别在
@each里直接写map-get($breakpoints, $i)——$i是数字，$breakpoints的 key 是字符串，查不到值
map 的键名必须加引号，否则 @each 解构失败
写 $spacers: (2: 0.5rem, 4: 1rem) 看似简洁，但 Sass 会把 2 当作“无名键”处理，@each $key, $val in $spacers 中的 $key 实际为 null，整个循环静默跳过。
必须写成：$spacers: ("2": 0.5rem, "4": 1rem)，确保 $key 是字符串，才能安全拼进 .m-#{$key} 这类类名。
生成 calc() 宽度时别漏掉括号和单位
写 flex-basis: calc(#{$i} / 12 * 100%) 看起来对，但 Sass 编译后是 calc(6 / 12 * 100%)，浏览器能算；可一旦 $i 是变量表达式（比如来自 map 的值），就得确认它带单位——map-get($sizes, "lg") 返回 992px，但直接除会出错。
更稳妥的写法是显式转数字：flex-basis: calc((#{$i} / 12) * 100%)，括号强制运算优先级；若涉及像素值参与计算，先用 strip-units() 函数剥离单位再算。
真正容易被忽略的是：所有这些 @each 产出的类，最终是否被 HTML 使用、是否与其他工具类冲突、是否在小屏下意外覆盖了基础样式——@each 只管生成，不管语义合理性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
