简介
Sprity 是一个构建雪碧图的工具，可以将多个小图片合并成一张大图，从而减少 HTTP 请求的次数，提升页面加载速度。Sprity 支持生成多种格式的雪碧图，包括 CSS、Sass、Less、Stylus 等格式。
sprity-scss 是 Sprity 的一个插件，用于生成 Sass 格式的雪碧图。本篇文章将介绍如何使用 sprity-scss。
安装
全局安装
npm install sprity -g npm install sprity-scss -g
本地安装
npm install sprity --save-dev npm install sprity-scss --save-dev
使用
下面的例子将小图片 icon1.png 与 icon2.png 合成一张名为 icons.png 的雪碧图，并同时生成相应的 Sass 样式文件 icons.scss。
sprity create icons --style icons.scss --png-compression-level 3 --src "{path}/icons/*.png"其中，--style 参数指定生成的样式文件名，--png-compression-level 参数指定 PNG 压缩级别，取值范围为 0-9，0 表示无压缩，9 表示最高级别压缩。--src 参数指定小图片所在的目录或文件名，支持 glob 模式。
生成的 Sass 样式文件 icons.scss 的内容如下所示：
-- -------------------- ---- ------- ------ - ----------- ---------------- ---------- - ------------ - -------------------- - -- ------ ----- ------- ----- - ------------ - -------------------- ----- -- ------ ----- ------- ----- -
在 HTML 中使用雪碧图：
<div class="icons"> <div class="icons-icon1"></div> <div class="icons-icon2"></div> </div>
参数选项
除了上述使用方法中提到的几个参数，还有以下常用的参数选项：
--dimension：指定雪碧图的尺寸，默认值为auto，即自动计算。可以取值为auto、max、4096x4096等。--style-type：指定样式文件的类型，默认值为stylus，可以取值为css、scss、less等。--style-indent-char：指定样式文件的缩进字符，默认值为space，可以取值为tab、space等。--style-indent-size：指定样式文件的缩进尺寸，默认值为2。--style-template：指定样式文件的模板，默认值为空，可以自行编写 Sass 样式模板。
结语
通过本文的介绍，你已经了解了如何使用 npm 包 sprity-scss 进行构建雪碧图，并生成对应的 Sass 样式文件。在实际项目中，使用雪碧图可以显著提升页面加载速度，同时减轻服务器压力，是前端开发中非常重要的一项技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006709f8ccae46eb111f00b