Sass的@each需经Dart Sass编译才能生效，HTML中直接写无效；map键名须加引号确保字符串类型；嵌套循环应外层遍历断点以减少CSS体积；图标Unicode需双反斜杠转义并加引号，font-family须显式声明。
为什么直接在HTML里写@each没用
Sass 的 @each 是预处理器语法，浏览器完全不认识它。把 @each 塞进 HTML 的 <style> 标签里，不会报错，也不会生效——只是静默失败。必须先用 Dart Sass 编译成纯 CSS，再引入 HTML。
生成间距类时 map 键名必须加引号
常见错误是写 $spacers: (2: 0.5rem, 4: 1rem)，Sass 会把数字键当作“无名键”，@each $key, $value in $spacers 解构失败，结果什么也不输出。正确写法是：$spacers: ("2": 0.5rem, "4": 1rem)，确保 $key 是字符串，能安全拼进 class 名如 .mt-#{$key}。
嵌套循环顺序决定 CSS 体积和响应式逻辑
要加断点（比如 md:mt-4），别把断点塞进最内层循环。否则每个间距类都单独套一次 @media，CSS 体积暴涨。正确做法是外层遍历断点，内层遍历间距值：
@each $breakpoint, $query in $breakpoints {
@media (#{$query}) {
@each $dir, $prop in $dirs {
@each $key, $val in $spacers {
.m#{$dir}-#{$key} { #{$prop}: $val; }
}
}
}
}
这样同一断点下的所有工具类共用一个 @media 块，Dart Sass 才能自动合并。
立即学习“前端免费学习笔记（深入）”；
图标类 content 值必须用双反斜杠转义并加引号
定义图标 map 时，Unicode 必须写成 "\e900"，不能是 e900 或 '\e900'；生成 content 时必须用 content: "#{$unicode}" 包裹。漏掉引号或转义错误，编译后要么显示字面字符串 \e900，要么报错 Undefined variable。
另外，font-family 必须显式写在 ::before 规则里，不能靠继承；开发时直接看 Elements 面板的 Computed 栏，确认 content 解析为字符、font-family 命中目标字体名。
