循环生成的CSS类常大量冗余，未被实际使用，拖慢首屏加载和CSSOM构建；应通过白名单控制、@debug定位、map替代数组、避免循环内调用@mixin、配合PurgeCSS注释或占位符模板来精准生成。
循环生成的CSS类真的都被用到了吗
很多项目里 @for 和 @each 一跑就输出几十个类，比如 .mt-1 到 .mt-100、.color-red 到 .color-purple-900，但实际 HTML 中只用了其中三五个。这些“备而不用”的规则全打进 CSS 文件，直接拖慢首屏加载和 CSSOM 构建。
常见错误现象：Lighthouse 报 “Avoid large, complex selectors” 或 “Reduce unused CSS”，DevTools 的 Coverage 面板显示 60%+ 样式未命中。
- 别靠“以后可能用上”写循环——先确认模板/组件中真实出现的 class 名称和取值范围
- 对工具类（如间距、颜色、字体大小）做白名单控制，而不是暴力遍历整个数字区间
- 用
@debug在编译时打印生成逻辑：@debug "Generating .mt-#{$i} for #{$i}";，配合构建日志快速定位冗余输出点
用 @each 替代 @for 时如何避免键名污染
@each 看似安全，但若源数据是扁平数组（如 $colors: red, green, blue），生成的类名就只能靠 #{$color} 拼接，一旦变量值含空格或特殊字符（如 light gray），编译直接报错或产出非法 class。
更隐蔽的问题是语义断裂：你本想定义主题色，结果 @each $c in $colors 生成了 .text-light gray 这种无效选择器。
立即学习“前端免费学习笔记（深入）”；
- 始终用 map 替代数组：
$colors: ("primary": #3b82f6, "success": #10b981, "warning": #f59e0b); - 循环时解构 key/value：
@each $name, $value in $colors { .text-#{$name} { color: $value; } } - key 名必须是合法 CSS 标识符（字母/下划线开头，不含空格、连字符、括号）
循环体里调用 @mixin 为什么会让体积翻倍
在 @for 内部反复调用同一个 @mixin（比如 @include responsive-font($i)），Sass 不会复用已生成的规则，而是为每次调用都展开一份完整副本。一个含 3 条声明的 mixin 被循环 20 次，就多出 60 行重复 CSS。
这比手写重复代码更难察觉，因为源码看着很“DRY”，输出却极度冗余。
- 把计算逻辑抽成函数（
@function），只在需要的地方返回值，而非生成样式块 - 若必须用 mixin，确保它只接收不可再拆分的原子参数（如单个断点、单个尺寸），避免内部再嵌套循环
- 检查最终 CSS：搜索
.mt-5 { margin-top: 1.25rem; }是否重复出现多次，是就说明 mixin 被过度展开
怎么让循环生成的类支持 PurgeCSS 正确识别
PurgeCSS 默认只扫描 HTML、JS、Vue 等文本文件中的 class 字符串，对 Sass 动态拼接（如 .mt-#{$i}）完全不可见，导致整段循环生成的 CSS 全被判定为“未使用”而清空。
这不是 PurgeCSS 的 bug，是它的设计限制——它不执行 Sass 编译，只做字符串匹配。
- 在 PurgeCSS 的
content配置中显式加入占位符模板：["./src/**/*.html", "./src/**/*.{js,ts,vue}", "./src/styles/_spacing.scss"] - 对关键循环加注释标记，供 PurgeCSS 白名单识别：
// purgecss start ignore和// purgecss end ignore - 更可靠的做法：用
@use+@forward将循环逻辑封装进独立模块，再通过!default变量控制开关，构建时按需启用
