Sass无法直接读取图标文件夹，必须通过构建工具（如Webpack/Vite）扫描生成JSON或Sass变量文件（如$icon-list），再由Sass加载并遍历；@font-face需手动声明woff2/woff等格式，不可自动切换；图标类名需用@mixin结合Unicode生成，DPR适配须依赖构建脚本输出映射表，无法全自动实现。
如何用 Sass 读取图标文件夹并生成 @font-face 和类名
不能直接在 Sass 中读取文件系统，@use 或 @import 不支持动态遍历目录。所谓“自动读取图标集”，本质是把构建时的文件信息提前注入 Sass —— 最可靠的方式是让构建工具（如 Webpack、Vite、PostCSS 插件）扫描 icons/ 目录，生成一个 JSON 或 Sass 变量文件，再由 Sass 加载。
例如，用 Node.js 脚本扫描 SVG 文件，输出：
$icon-list: ( "home": "M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z", "search": "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" );
这样你才能在 Sass 中安全地遍历：@each $name, $path in $icon-list。
用 @mixin 生成多分辨率 icon-font 的 @font-face 规则
真正需要“多分辨率”的不是字体图标（字体本身是矢量，缩放无损），而是导出为 PNG/SVG sprite 时的 DPR 适配。但如果你坚持用 icon font 并想兼容旧设备（如 iOS Safari 对 woff2 支持不一），可手动声明多个格式：
-
@font-face必须为每种格式（.woff、.woff2、.ttf）单独写一条规则，不能靠 mixin 自动切换 —— 浏览器自行选择 - 实际项目中，只保留
.woff2+.woff就覆盖 99% 场景；.ttf几乎没必要 - 路径必须写死或通过变量注入，Sass 无法根据文件存在与否条件编译
典型写法：
@font-face {
font-family: "my-icons";
src: url("./fonts/my-icons.woff2") format("woff2"),
url("./fonts/my-icons.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: block;
}
生成 .icon-{name} 类并支持 DPR 媒体查询回退
所谓“多分辨率 CSS”，对字体图标来说，其实是控制伪元素内容和字体大小。关键点在于：字体图标不需要像素级 DPR 适配，但如果你用 background-image sprite，则需 @media (-webkit-min-device-pixel-ratio: 2) 切换雪碧图位移。
立即学习“前端免费学习笔记（深入）”；
推荐 mixin 写法（适用于字体方案）：
@mixin icon($name, $unicode) {
&.#{$name}::before {
content: unquote("\"#{$unicode}\"");
}
}
// 使用
.icon-home { @include icon("home", "\e900"); }
若真要用 background-image 方案，DPR 切换逻辑必须手动写媒体查询，Sass 无法自动生成“所有图标都加 2x 版本”—— 因为每个图标的 background-position 在 2x 图里要翻倍，而这个偏移值无法从文件名推导，得靠构建脚本计算并输出映射表。
为什么别硬刚“全自动读取图标”
试图用 @import "icons/*" 或类似语法让 Sass 扫描目录，会失败 —— Sass 编译器不访问文件系统，且不支持 glob 导入。常见误操作包括：
- 用
node-sass的includePaths配合通配符：无效，仅用于定位已知路径 - 在
.sassrc.js里读文件然后 return 变量：Webpack/Vite 的 sass-loader 支持，但配置脆弱，升级易崩 - 用
postcss-sprites等插件替代：那是 PostCSS 层的事，和 Sass mixin 无关
最稳的路径是：构建脚本生成 _icons.generated.scss → Sass @use 它 → mixin 消费变量。任何跳过这步、幻想 Sass “自己发现图标”的做法，都会卡在第一步。
