sass 的 @each 只能在 scss/sass 文件中使用，html 中直接写无效；需先用 dart sass 编译为 css 再引入。
为什么不能直接在 HTML 中用 Sass 的 @each
Sass 是 CSS 预处理器，@each 只能在 .scss/.sass 文件里运行，HTML 里写 @each 完全无效——浏览器根本不认识它。常见错误是把 Sass 代码直接塞进 <style></style> 标签，结果样式不生效、控制台也没报错，只是“静静失效”。真正流程是：写好 @each 的 SCSS → 用 Sass 编译器（如 Dart Sass）转成纯 CSS → 把生成的 CSS 引入 HTML。
怎么用 @each 批量生成间距工具类（比如 mt-2, mb-4）
典型场景是生成 margin/padding 工具类。关键点不是循环本身，而是数据结构设计和命名映射是否清晰：
- 用 map 存键值对，比如
$spacings: ("2": 0.5rem, "4": 1rem, "8": 2rem)，避免用数组导致索引与语义脱节 - 循环时用
@each $key, $value in $spacings，确保$key能直接拼进 class 名（如mt-#{$key}） - 方向前缀（
mt/mr/mb/ml）建议单独再套一层循环，避免重复写四遍@each
示例片段：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
$spacings: ("2": 0.5rem, "4": 1rem, "8": 2rem);
$dirs: ("t": "margin-top", "r": "margin-right", "b": "margin-bottom", "l": "margin-left");
@each $dir, $prop in $dirs {
@each $key, $val in $spacings {
.m#{$dir}-#{$key} {
#{$prop}: $val;
}
}
}
生成响应式工具类时，@each 嵌套顺序影响 CSS 体积和覆盖逻辑
如果还要加断点（如 md:mt-4），别把断点塞进最内层——那样会生成大量冗余规则。正确做法是外层循环断点，内层循环间距，让媒体查询包裹整组 margin 类：
- 错误：每个
.mt-2都单独套@media，CSS 体积翻 3–4 倍 - 正确：先
@each $breakpoint, $query in $breakpoints，再嵌套间距循环，同一断点下的所有工具类共用一个@media - Dart Sass 会自动合并同级媒体查询，但前提是它们完全相同；手动拼字符串（如
@media (min-width: #{$val})）容易因空格/单位差异导致无法合并
编译后 class 名没出现？检查这三处硬性限制
@each 不报错但没输出，大概率卡在这几个地方：
- 变量名拼错或作用域不对：比如在嵌套规则里定义
$spacings，外层@each访问不到——Sass 变量必须在使用前声明且在可见作用域 - map 键用了数字字面量（如
2: 0.5rem），Sass 会把它当“无名键”，@each解构失败；必须加引号写成"2": 0.5rem - 用了
!default却没初始化变量：比如$spacings: () !default后直接@each，空 map 会导致静默跳过，连警告都没有
调试技巧：在 @each 前加 @debug length($spacings)，确认 map 确实有内容。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
