@for 生成间距工具类时索引从 1 开始，如 @for $i from 1 through 4，避免 mt-0 冗余和漏生成 mt-4，语义更直观且符合 css 类名惯例。
用 @for 生成间距工具类时，索引从 1 还是 0 开始？
直接用 @for $i from 1 through 4，别用 0 to 3 —— 因为 CSS 类名（如 mt-1）语义上对应的是物理单位（rem、px），用户不关心底层偏移。从 1 开始更直观，也避免生成 mt-0 这种冗余类（除非你真需要它）。
常见错误是写成 @for $i from 0 to 4，结果漏掉 mt-4；或者用 through 却忘了加 1 导致多出一个无效层级。
实操建议：
- 统一用
@for $i from 1 through $count，$count 显式声明（比如$spacing-steps: 8） - 类名拼接用
#{}插值，例如.mt-#{$i} { margin-top: #{$i}rem; } - 如果想支持小数（如 0.25rem），改用
@each遍历列表更安全，避免浮点计算误差
用 @each 处理颜色工具类时，为什么 map 键名不能带中划线？
Sass map 的 key 是标识符，primary: #007bff 没问题，但写成 bg-primary: #007bff 会报错 Invalid CSS after "bg": expected expression。这是因为中划线被解析为减号运算符。
实操建议：
- map key 用下划线或驼峰，比如
bg_primary: #007bff，生成类名时再转成bg-primary - 用
str-replace函数转换：定义@function str-replace($string, $search, $replace) { ... }，然后.bg-#{str-replace($key, '_', '-')} - 别在 map 里存完整类名（如
"bg-primary": #007bff），那样失去动态生成意义，也难维护
批量生成响应式工具类，@media 嵌套在循环里会导致输出膨胀吗？
会。如果在 @for 内部直接写 @media (min-width: 768px) { .mt-1 { ... } }，每个类都会重复输出一遍媒体查询，CSS 体积翻倍甚至更多。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
正确做法是把循环放在媒体查询内部：
@media (min-width: 768px) {
@for $i from 1 through 4 {
.mt-sm-#{$i} { margin-top: #{$i}rem; }
}
}
这样媒体查询只声明一次，类名也带语义前缀（sm），避免和基础类冲突。注意：Sass 不支持“先循环再条件分组”，所以必须手动为每个断点写一层 @media + 循环。
- 断点变量统一用 map 管理，比如
$breakpoints: (sm: 768px, md: 1024px) - 配合
@each $name, $width in $breakpoints可减少重复，但需额外封装 mixin - 警惕嵌套过深：循环 + 媒体查询 + 伪类（如
:hover）三层叠加，易产生不可维护的 CSS
生成的工具类太多，怎么避免未使用类污染最终 CSS？
Sass 本身不删代码，它生成什么，Webpack 或 PostCSS 就打包什么。即使你写了 @for $i from 1 through 20，只要没在 HTML 里写 mt-19，这个类就纯属冗余。
真正有效的方案只有两个：
- 用
purgecss或tailwindcss的content配置扫描模板文件，自动剔除未引用类 - 限制循环范围：按真实项目需求设上限，比如间距只到
8，字体大小只到xl，别照抄 Tailwind 全量生成 - 把高频类（如
mt-1到mt-4）和低频类（mt-12）拆到不同文件，按需引入
别指望 Sass 自动优化——它只管生成，不管用不用。生成逻辑越灵活，后期清理负担越重。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
