如何利用Sass自动生成多分辨率图标CSS_编写自动化读取图标集的Mixin逻辑-css教程-PHP中文网

sass无法直接读取图标文件夹，必须通过构建工具（如webpack/vite）扫描生成json或sass变量文件（如$icon-list），再由sass加载并遍历；@font-face需手动声明woff2/woff等格式，不可自动切换；图标类名需用@mixin结合unicode生成，dpr适配须依赖构建脚本输出映射表，无法全自动实现。

如何利用sass自动生成多分辨率图标css_编写自动化读取图标集的mixin逻辑

如何用 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 无法根据文件存在与否条件编译

典型写法：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

@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 图里要翻倍，而这个偏移值无法从文件名推导，得靠构建脚本计算并输出映射表。