直接用@each遍历Map生成工具类易漏响应式变体，因单层循环无法自动组合断点与值；须用嵌套@each分离断点和配置Map，外层遍历断点生成@media，内层遍历值生成类，避免硬编码前缀和重复媒体查询。
为什么直接用 @each 遍历 Map 生成工具类容易漏掉响应式变体
SCSS 的 @each 确实能遍历 Map 生成基础工具类，比如 text-red、bg-blue，但多数项目需要在不同断点（如 md:、lg:）下也提供对应类。如果只写一层 @each，所有变体都得手动重复写断点逻辑，极易遗漏或不一致。
常见错误是把断点硬编码进 Map 键名（如 "md:text-red": #f00），导致无法复用颜色定义，维护成本陡增。
- 正确做法是分离「值源」（颜色/间距 Map）和「上下文」（断点规则），用嵌套
@each或函数封装组合逻辑 - 推荐结构：
$colors: ("red": #f00, "blue": #00f)+$breakpoints: ("md": "min-width: 768px", "lg": "min-width: 1024px") - 注意：SCSS 中 Map 的键名不支持冒号（
:）作为合法标识符，所以断点前缀必须用字符串拼接，不能直接当 key 用
@each 嵌套循环生成带断点的工具类时，媒体查询怎么写才不冗余
很多人在内层循环里对每个断点都写一遍 @media，结果编译出大量重复的 @media 块——这既影响 CSS 体积，也降低浏览器解析效率。
更优解是先按断点分组，外层遍历断点，内层遍历值，让每个断点只包裹一次媒体查询：
立即学习“前端免费学习笔记（深入）”；
@each $breakpoint, $query in $breakpoints {
@media (#{$query}) {
@each $name, $value in $colors {
.text-#{$name} {
color: $value;
}
.bg-#{$name} {
background-color: $value;
}
}
}
}
- 关键点：
#{$query}必须用插值包裹，否则 SCSS 会报错Invalid CSS after "@media" - 如果断点 Map 是空的（比如开发环境禁用响应式），整个
@media块会被跳过，不会输出空规则 - 避免在
@media内使用@at-root提升选择器，否则会破坏作用域，导致类名泄漏到全局
Map 的 value 是复合结构（如 rgba + opacity）时，@each 怎么安全解构
纯色值可以直接用 $value，但像间距工具类常需同时控制 padding 和 margin，或者颜色需带透明度（如 ("primary": (color: #007bff, alpha: 0.8))）。这时直接 @each $key, $val in $map 拿到的是整个嵌套 Map，不是原子值。
必须用 map-get() 显式提取字段，且要加存在性判断，否则遇到缺失字段会编译失败：
@each $name, $config in $spacings {
$size: map-get($config, "size");
$unit: map-get($config, "unit") or "rem";
@if $size != null {
.p-#{$name} {
padding: #{$size}#{$unit};
}
.m-#{$name} {
margin: #{$size}#{$unit};
}
}
}
-
map-get()返回null而非报错，所以要用@if $size != null判断，不能只靠 truthy/falsy - 不要用
map-keys()或map-values()替代解构——它们返回新 List，丢失原始键值关联 - 若配置项有默认 fallback（如
$unit: map-get($config, "unit") or "rem"），确保右侧默认值本身是合法 SCSS 值，别写成字符串"rem"后又忘了插值
生成的工具类太多导致 CSS 体积暴涨，怎么按需开关
全量生成 text-、bg-、border-、p-、m-……几十个系列，动辄上万行 CSS，gzip 后仍可能超 100KB。关键是不能靠「删代码」来减负，而要从生成逻辑入口控制。
最实用的方式是定义布尔开关变量，在循环前加 @if 条件：
$enable-text-utilities: true !default;
$enable-spacing-utilities: false !default;
@if $enable-text-utilities {
@each $name, $value in $colors {
.text-#{$name} { color: $value; }
}
}
@if $enable-spacing-utilities {
@each $name, $value in $spacings {
.p-#{$name} { padding: $value; }
}
}
- 用
!default声明开关，方便在项目根文件中统一覆盖（如$enable-text-utilities: false;） - 避免用
@if not $disable-xxx这种双重否定，可读性差且易翻车 - 真正难处理的是「部分启用」：比如只开
md:text-但不开sm:text-——这时得把断点也做成开关 Map，而不是硬编码在循环里
Map 遍历本身不慢，但生成的 CSS 是否被用到，才是体积问题的核心。工具类体系越庞大，越要配合 PurgeCSS 或 Lightning CSS 的 tree-shaking，否则光靠 SCSS 层面的开关只是掩耳盗铃。
